JQuery UI - एकाधिक divs से मेल खाने वाले चयनकर्ता को रोकथाम कैसे लागू करें?

Question

उदाहरण:

<div> 
    <div class='drop'> 
     <div class='drag'></div> 
    </div> 
    <div class='drop'> 
    </div> 
    <div class='drop'> 
    </div> 
    <div class='drop'> 
    </div> 
    <div> 
    </div> 
</div> 

$('div.drag').draggable({ containment: 'div.drop' }); 

आम तौर पर, अगर वहाँ केवल तत्व 1 "div.drop" है, यह अपेक्षित तरीके से काम। यदि 1 से अधिक (जैसे ऊपर दिए गए उदाहरण में) हैं, तो मैंने सोचा था कि इसे किसी भी "div.drop" divs में खींचा/गिरा दिया जाएगा। जैसे-जैसे यह निकलता है, यह केवल "div.drop" चयनकर्ता द्वारा मेल खाने वाले पहले तत्व के लिए खींचने योग्य/ड्रॉप करने योग्य है।

इसके लिए एक समाधान है (यानि, केवल "div.drop" divs में यह/droppable/खींचने योग्य निहित बनाने) है?

संपादित करें: मुझे लगता है कि आप सही लोगों को कर रहे हैं। कुछ आत्मनिरीक्षण के बाद, मुझे एहसास हुआ कि मैं आपके सुझाए गए समाधानों के लिए नहीं गया क्योंकि divs के बीच पैडिंग है और मैं नहीं चाहता कि "div.drag" divs को गद्देदार इलाके में गिरा दिया जाए।

Answer 1

यह है कि तरह नहीं काम करता है !! रोकथाम खींचने के बाध्यता को बाध्य करना है।

आप खींचें और ड्रॉप करना चाहता हूँ।

$('div.drag').draggable(); 

और div.drop के लिए ड्रॉप कॉन्फ़िगर करें::
तो फिर तुम div.grag के लिए खींचें को कॉन्फिगर करना

$('div.drop').droppable(); 

आप अपने पहले div स्तर के साथ अपने खींचें तत्व के लिए रोकथाम जोड़ सकते हैं:

<div id='dragZone'> 
    <div class='drop'> 
     <div class='drag'></div> 
    </div> 
    <div class='drop'> 
    </div> 
</div> 


$('div.drag').draggable({ containment: '#dragZone'}); 

Answer 2

containment दिया तत्व (रों) की सीमा के भीतर एक खींचने योग्य की आवाजाही प्रतिबंधित करता है। आप containmentdiv.drop के माता-पिता को सेट कर सकते हैं।

आप div.drop रों droppable के रूप में लोगों को रोकथाम ने बताया है बनाना चाहिए, ड्रॉप पर खींचने योग्य जोड़ने और revert: 'invalid' विकल्प का उपयोग इतना है कि खींचने योग्य वापस आ जाता है अगर यह एक droppable

$('div.drop').droppable({drop: function(e, ui) { 
    ui.draggable.appendTo(this); 
}}); 
$('div.drag').draggable({ 
    helper: 'clone', 
    revert: 'invalid' 
}); 

Answer 3

पर गिरा नहीं कर रहा है selector इस तरह काम नहीं करता है क्योंकि यह निर्दिष्ट तत्व या क्षेत्र की सीमाओं के भीतर खींचने की रोकथाम करता है।

आप नीचे दिए गए की तरह कुछ की कोशिश कर सकते:

JQuery संदर्भ:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 

HTML:

<div id="dragContainer">  
<div class='drop'> 
    <div class='drag'>drag</div>  
</div>  
<div class='drop'>drop 
</div>  
<div class='drop'>drop 
</div>  
<div class='drop'>drop 
</div>  
<div class='nodrop'> 
</div> 
</div> 

JQuery:

<script type="text/javascript"> 
$('div.drag').draggable({ containment: '#dragContainer', revert: "invalid" }); 

    $('div.drop').droppable({ 
    drop: handleDropEvent 
    }); 

function handleDropEvent(event, ui) { 
    var draggable = ui.draggable; 
    alert('Ok to drop here onto me!'); 
} 
</script> 

Answer 4

मेरी कोड की कोशिश करो

<style> 
.container { 
    border: 2px solid #000; 
} 
.container img { 
    width: 45px; 
    height: 45px; 
} 
.draggable { 
    width: 40px; 
    height: 40px; 
    background: #F90; 
    border-radius: 10px; 
    margin: 0 0 0 0; 
    float: top; 
} 
.draggable.is-pointer-down { 
    background: #09F; 
    z-index: 2; /* above other draggies */ 
} 
.draggable.is-dragging { opacity: 0.7; } 
</style> 
    <script> 
$(document).ready(function() { 
    var $draggables = $('.draggable').draggabilly({ 
    // contain to parent element 
        **containment: "#box"** 
    }); 
}); 
</script> 

हैलो। मैं इस आप मदद कर सकता है लगता है :)

<div class="container" id="box"> 

और मेरी छवियाँ इस div के अंदर हैं।