使用Droppable处理jQuery UI Draggable启动/停止事件

Question

Here my JSfiddle

目前你可以将任何可拖动的东西放到3个不同的div中，它会用它的值更新另一个div。

但问题是，如果用户要拖动已放置在droppable中的可拖动对象并将其放入新的droppable，则不会对过去的值进行“清理”。

所以例如，如果你在'DROP ME HERE FIRST'中拖动'DRAG ME X'，然后进入'DROP ME HERE SECOND'，最后进入'DROP ME HERE THIRD'，输出应该如下：< / p>

Div1值：null

Div2值：null

Div3值：X

但它反过来说：

Div1值：X

Div2值：X

Div3值：X

我被建议使用ui.helper.prevObject来使用.draggable的启动/停止事件。但我现在完全混淆了如何将draggable的启动/停止事件与droppable的drop事件集成在一起，哪些功能似乎在大多数情况下都有效。

这是我的可放置代码：

$('#div1').droppable({
accept: '#draggables .drag, #droppables .drag',
drop: function(event, ui)
{

    $(this).text('');
    $(ui.draggable).appendTo(this);
$(ui.draggable).attr('DivID', 'Div_1');
    $('#div1_value').text(ui.draggable.data('object'));
}
});

我的可拖动代码包含启动/停止事件：

$('.drag').draggable({
            helper: 'clone',
            revert: 'invalid',
start: function(event, ui){
    var oldValue = ui.helper.prevObject.attr('DivID');

},
stop: function(event, ui){
   console.log(event);
      console.log($(ui.helper[0]).children().attr('DivID'));


}