我在使用 Jquery UI 的可放置/可拖動插件時遇到問題。如果我有兩個未嵌套但由于 css 結構而重疊的元素，則會為這兩個元素拋出 drop 函式。如何防止背景元素掉落？
這是一個例子： https ://jsfiddle.net/vq4x0b8L/2/
HTML
<div id="contenitore">
<div id="carrello">
<p>Drop here</p>
</div>
<div id="carrello2">
<p>Drop here</p>
</div>
<div id="fagioli">
<p>Drag me</p>
</div>
</div>
JS
$(function() {
$( "#fagioli" ).draggable();
$( "#carrello" ).droppable({
greedy: true,
drop: function( event, ui ) {
$( this )
.find( "p" )
.html( "Dropped." );
}
});
$( "#carrello2" ).droppable({
greedy: true,
drop: function( event, ui ) {
$( this )
.find( "p" )
.html( "Dropped." );
}
});
});
CSS
#contenitore {position: relative; width: 500px; height: 500px;}
#carrello {background: #ccc;width:400px;height:500px;}
#carrello2 {background: #ddd; width:300px;height:250px; position: absolute; bottom: 0px;}
#fagioli {background: #822222;width:70px;height:90px;position: absolute; top: 200px; right: 10px;}
#fagioli:hover {cursor:move}
我嘗試了“貪婪”選項，但它不起作用，可能它是為嵌套元素設計的。
uj5u.com熱心網友回復：
我找到了一種方法。
示例：https ://jsfiddle.net/Twisty/dezt5bmf/10/
JavaScript
$(function() {
$("#fagioli").draggable();
$("#carrello").droppable({
drop: function(event, ui) {
console.log("Dropped on " $(this).attr("id"));
$(this)
.find("p")
.html("Dropped.");
}
});
$("#carrello2").droppable({
tolerance: "touch",
drop: function(event, ui) {
console.log("Dropped on " $(this).attr("id"));
$(this)
.find("p")
.html("Dropped.");
$("#carrello").droppable("option", "accept", "*");
},
over: function(event, ui) {
$("#carrello").droppable("option", "accept", ".snowflake");
}
});
});
當 Draggable 超過 2nd droppable 時，我們將accept選項調整為非可拖動元素。這樣，當 drop 發生時，它對此不感興趣。執行 drop 后，我們可以將其切換回接受所有專案。
您也可以disable使用 dropables，但這會導致應用額外的樣式。改變accept不。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/489448.html
標籤：jQuery-ui jquery-ui-droppable