jQuery UI Droppable / Draggable

Question

Here is my JS Fiddle

在JS Fiddle中，div中有3个Droppables，名为'droppables'，div中有3个Draggables，名为'draggables'。您可以将任何可拖动拖动到任何一个droppable上，它将使用数据更新相应的div。

    $(this).text('');
    $('#div1_value').text(ui.draggable.data('object'));
    $(ui.draggable).appendTo(this);

您也可以通过拖动拖动到可拖动的拖放器来“覆盖”。这会将旧的draggable追加到draggables列表中。

if(counter != 1)
        {
            $(this).find('.ui-draggable').appendTo($('#draggables'));
            counter = 1;
        }

虽然这是麻烦。如果你要将一个drappable从一个droppable拖到另一个droppable，你会注意到div的值现在在技术上是null和void仍然会显示旧的draggable的值。

Answer 1

好的，第二次尝试。

您应该使用可拖动的start和stop功能：http://api.jqueryui.com/draggable/#event-start

当开始事件发生时，ui.helper是被拖动的新临时对象，而ui.helper.prevObject是前一个对象，仍在其位置。

当停止事件发生时，ui.helper仍然是被拖动的临时对象，ui.helper.prevObject是即将降落的新对象（我知道，它有点令人困惑，因为它被称为prevObject，但那是它似乎如何工作）。

请注意，在两种情况下，prevObject都处于“正确”位置，因此您可以使用它们来查找正确的可放置容器并更新计数器，文本以及您可能仍需要执行的任何其他“清理”操作

我建议你在start事件中准备一些全局变量，如果draggable被丢弃在不同的droppable中，你将需要进行清理，但是你将实际的清理延迟到stop事件（如果事先检查的话）它实际上是需要的。）

你应该使用droppable中的out事件：http://api.jqueryui.com/droppable/#event-out拦截当你的一个可拖动事件离开了droppable。

我会在一分钟内为您准备一些代码。