JQuery UI - 如何將遏制應用於匹配多個div的選擇器？

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」div中。事實證明，它只能拖動/放置到由「div.drop」選擇器匹配的第一個元素。

是否有解決方法（即，僅在「div.drop」divs中包含/ droppable/draggable）？

編輯：我想你是對的人。經過一番反思之後，我意識到我沒有去推薦你的解決方案，因爲div之間有填充，我不希望「div.drag」div放在填充區域。

Answer 1

它不這樣工作！ 遏制是約束拖拽的約束。

要拖放。
然後，你必須配置拖累div.grag：

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

而對於div.drop配置降：

$('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限制可拖動元素在給定元素邊界內的移動。您可以將containment設置爲div.drop的父級。

你應該讓div.drop小號可棄，追加了可拖動的下降，並使用revert: 'invalid'選項，這樣可拖動將恢復，如果它不是一個投擲的

$('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裏面。