jQuery UI - 在 DOM 中移动可放置元素

Question

我试图通过中间可放置元素将两个可排序元素绑定(bind)在一起。但是，我似乎无法通过通常的appendTo方法从droppable.drop事件内部移动DOM中的可拖动对象。

这个想法是将一个项目从可排序项拖到与可排序项共享相同 data-tabid 属性的可转换项上，并使该项目出现在相应的可排序项中。但是，可拖动对象将返回到其在原始可排序对象中的位置，并且不会移动到新的可排序对象中。

我在这里遗漏了什么吗？或者有更简单的方法来实现这一目标吗？

HTML:

<div class="tab" data-tabid="10">Tab 1</div>
<div class="tab" data-tabid="20">Tab 2</div>

<div class="area" data-tabid="10">
    <div class="widget" data-id="1">Widget 1</div>
    <div class="widget" data-id="2">Widget 2</div>
    <div class="widget" data-id="3">Widget 3</div>
</div>

<div class="area" data-tabid="20">
    <div class="widget" data-id="4">Widget 4</div>
    <div class="widget" data-id="5">Widget 5</div>
    <div class="widget" data-id="6">Widget 6</div>
</div>

脚本:

$('.tab').droppable({
    accept: '.widget',
    hoverClass: 'drop-hover',
    drop: function(event, ui) {
        var widgetid = ui.draggable.data('id');
        var tabid = $(event.target).data('tabid');
        console.log('widgetid: ' + widgetid + '; tabid: ' + tabid);

        var targetarea = $('.area[data-tabid="' + tabid + '"]');
        console.log('put widget:');
        console.log(ui.draggable);
        console.log('in area:');
        console.log(targetarea);

        ui.draggable.appendTo(targetarea);

        console.log('---=== end drop ===---');
    }
});

$('.area').sortable({
    items: '.widget'
});

JSFiddle

Answer 1

我认为在成功进行放置尝试之后，放置事件触发得太快，因此检测到放置事件，但在放置实际发生之前。

如果你改变

ui.draggable.appendTo(targetarea);

至

setTimeout(function() {ui.draggable.appendTo(targetarea);},0);

有效