भाई तत्वों के साथ ओवरलैपिंग/टकराव से jQuery ड्रैग करने योग्य वस्तुओं को प्रतिबंधित करें

Question

मुझे कुछ अतिरिक्त प्रतिबंध के साथ ड्रैगगेबल ऑब्जेक्ट के लिए रोकथाम क्षेत्र को प्रतिबंधित करने के लिए jQuery UI का उपयोग करने की आवश्यकता है। मुझे ड्रैग करने योग्य तत्व को उसी कंटेनर के अन्य तत्वों के साथ ओवरलैप करने से रोकने की आवश्यकता है। मुझे "moveInHere" क्षेत्र में आंदोलन की अनुमति देने की आवश्यकता है लेकिन "butNotHere" क्षेत्र नहीं है। क्या यह संभव है?

<div id="moveInHere"> 

    <div id="dragMe"> </div> 

    <div id="butNotHere"> </div> 

</div> 


<script type="text/javascript"> 

    $("#dragMe").draggable({ 
     containment: "#moveInHere" 
    }); 

</script> 

Answer 1

संपादित करें: नई समाधान

मैं के लिए एक प्लगइन पाया इसे JQuery UI Draggable Collision कहा जाता है। इसका उपयोग करके, आपकी वांछित कार्यक्षमता को लागू करना तुच्छ हो जाता है। निम्नलिखित jsFiddle उदाहरण देखें: http://jsfiddle.net/q3x8w03y/1/ (यह JQuery यूआई खींचने योग्य टकराव के संस्करण 1.0.2 का उपयोग करता है, JQuery 1.7.2 और jQueryUI 1.1.18 के साथ।)

यहाँ कोड है:

$("#dragMe").draggable({ 
    obstacle: "#butNotHere", 
    preventCollision: true, 
    containment: "#moveInHere" 
}); 

पुरानी समाधान

निम्नलिखित काम करना चाहिए। हालांकि, यह एक गड़बड़ है। एक बार divs टक्कर लगी है, तो आप खींचने वाले div को "regrab" करना होगा, जो थोड़ा परेशान हो सकता है। शायद किसी और को यह पता चलेगा कि इसे कैसे ठीक किया जाए। http://jsfiddle.net/MrAdE/8/

var prevOffset, curOffset; 
$("#dragMe").draggable({ 
    drag: function(e,ui) { 
     prevOffset= curOffset; 
     curOffset= $.extend({},ui.offset); 
     return true; 
    } 
}); 

$("#butNotHere").droppable({ 
    greedy: true, 
    over: function(e,ui) { 
     ui.helper.offset(curOffset= prevOffset).trigger("mouseup"); 
    }, 
    tolerance: "touch" 
});​ 

Answer 2

यह मुझे थोड़ा सा झुकाव ले गया। असल में मैंने उस तत्व पर droppable बनाया है जिसे आप टालना चाहते हैं, फिर ड्रैग होने पर बूलियन सेट करें। मैं फिर ड्रॉप को रद्द करने के लिए एक अनियंत्रित रिवर्ट फ़ंक्शन ओवरराइड में इसका उपयोग करता हूं। यह तभी काम करता है #dragMe है पूरी तरह से #butNotHere से अधिक:

$(document).ready(function(){ 
    var shouldCancel = false; 
    $('#dragMe').draggable({ 
     containment: '#moveInHere', 
     revert: function(){ 
      if (shouldCancel) { 
       shouldCancel = false; 
       return true; 
      } else { 
       return false; 
      } 
     } 
    }); 
    $('#butNotHere').droppable({ 
     over: function(){ 
      shouldCancel = true; 
     }, 
     out: function(){ 
      shouldCancel = false; 
     } 
    }); 
}); 

बाहर चेक काम कर डेमो और इसके साथ खेलने के लिए स्वतंत्र लग रहा है: http://jsfiddle.net/H59Nb/31/