jQuery UI的贪婪可丢弃对象无法按预期工作

Question

我有一个可拖放项的列表，可以将其放入可拖放对象中，当发生这种情况时，可拖动对象将被克隆并转换为可拖放对象。

这个新的可拖放对象是贪婪的，但是当它们收到可拖动对象时，将触发两个可拖放事件(来自可拖动对象的放置事件和来自可放置区域的放置事件)

我做错了什么？我只需要事件触发一次(从新的可丢弃对象)

这是一个小提琴：将一个项目拖放到红色区域，然后将另一个项目拖放到您已经放置的项目中。请参阅控制台日志。

.HTML

<div id="main_droppable"></div>
<ul>
<li class="item" data-id="1">1</li>
<li class="item" data-id="2">2</li>
<li class="item" data-id="3">3</li>
<li class="item" data-id="4">4</li>
<li class="item" data-id="5">5</li>
</ul>

.JS

$(".item").data("active", false);
$(".item").draggable({
helper: "clone",
appendTo: "#main_droppable",
scroll: false,
start: function(event, ui)
{
if($(this).data("active") == false)
{
$(this).fadeTo(100, 0.2);
}
else
{
return false;
}
},
revert: function(is_valid_drop)
{
if(!is_valid_drop)
{
$(this).fadeTo(100, 1).data("active", false);
return true;
}
else
{
$(this).data("active", true);
}
}
});
$("#main_droppable").droppable({
drop: function(event, ui)
{
console.log("drop main");
addNewItem(ui.helper);
return false;
}
});
function addNewItem($oldItem)
{
var $newItem = $oldItem.clone(false).fadeTo(100, 1).data("active", true);
$oldItem.remove();
$newItem.draggable({
containment: "parent",
});
$newItem.droppable({
greedy: true,
drop: function(event, ui)
{
console.log("drop item");
$(this).fadeTo(100, 0, function()
{
var $originalItem = $("ul").find(".item[data-id=" + $(this).data("id") + "]");
$originalItem.fadeTo(100, 1).data("active", false);
$("#main_droppable").find(".item[data-id=" + $originalItem.data("id") + "]").remove();
});
addNewItem(ui.helper);
}
});
$("#main_droppable").append($newItem);
}

.CSS

#main_droppable
{
border: 1px solid red;
min-height: 50px;
}
.item
{
display: inline-block;
border: 1px solid blue;
width: 25px;
height: 25px;
}

Answer 1

嗯...它与特定的类有关...

当我放下可拖动内容并克隆它时，ui-draggable-dragging类保留在原地。因此，为了使它工作，我必须将其删除，然后一切都按预期工作。

我更改了这一行：

var $newItem = $oldItem.clone(false).fadeTo(100, 1).data("active", true);

进入这个：

var $newItem = $oldItem.clone(false).fadeTo(100, 1).data("active", true).removeClass("ui-draggable-dragging");

更新的小提琴：https://jsfiddle.net/3118zjg1/1/

Answer 2

我认为可拖动对象实际上变得贪婪，但#main_droppable事件仍然被触发，因为：

当您将另一个.item元素放在另一个元素之上时，将触发将.item放入另一个.item的预期操作。

$newItem.droppable({
greedy: true,
drop: function(event, ui)
{
console.log("drop item");
...

但是无论如何，这个原始元素都会在代码的下方被删除。

$(this).fadeTo(100, 0, function()
{
var $originalItem = $("ul").find(".item[data-id=" + $(this).data("id") + "]");
$originalItem.fadeTo(100, 1).data("active", false);
$("#main_droppable").find(".item[data-id=" + $originalItem.data("id") + "]").remove();
...

您有效地将原始项目替换为新项目，因此触发了#main_droppable事件。

我不能说我知道如何在不改变您的预期行为的情况下解决无意的副作用，但希望您对为什么greedy属性似乎不起作用有更好的线索。