jQuery UI Droppable/Draggable

Question

Here is my JS Fiddle。

在JS小提琴中，在一個名爲'droppables'的div中有3個Droppables，在一個名爲'draggables'的div內有3個Draggable。您可以拖動任何可拖動對象到任何可拖放對象上，並且它將用數據更新相應的div對象。

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

您也允許通過拖動可拖動到可投放了可拖動已經存在「覆蓋」。這會將舊的可拖動追加回可拖動列表。

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

雖然這是麻煩。如果要將可拖動的拖放從一個拖放拖動到另一個拖放，則會注意到現在技術上無效的div的值仍將顯示舊拖動的值。

Answer 1

好的，第二次嘗試。

，您應該使用拖動的start和stop功能：http://api.jqueryui.com/draggable/#event-start

當啓動事件發生時，ui.helper被拖動，而ui.helper.prevObject是以前的對象，仍然在其位置上的新的臨時對象。

當停止事件發生，ui.helper仍然是被拖動的臨時對象和ui.helper.prevObject即將土地新對象（我知道，這是一個有點混亂，因爲它被稱爲prevObject，但這是它是如何似乎工作）。

請注意，prevObjects在這兩種情況下都處於「正確」位置，因此您可以使用它們來查找正確的可放置容器並更新計數器，文本以及您可能仍需要的任何其他「清理」操作做。

我建議您在開始事件中準備一些全局變量，如果可拖動元素放在不同的可拖拽元素中，您將需要執行清理操作，但是將實際清理操作推遲到停止事件（事先檢查如果它真的需要）。

你應該在可投放使用 out事件： http://api.jqueryui.com/droppable/#event-out當你拖動一個葉可放開攔截。

我會在一分鐘內給你一些代碼。