jQuery UI - 在 DOM 中移动 droppable答案

【问题标题】：jQuery UI - move droppable in DOMjQuery UI - 在 DOM 中移动 droppable
【发布时间】：2015-06-23 23:22:54
【问题描述】：

我正在尝试通过中间可放置元素将两个可排序元素联系在一起。但是，我似乎无法通过通常的 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

【问题讨论】：

目标只是链接 2 个可排序的吗？因为如果是这样，您可以在 sortables 中使用 connectWith 选项，如下所示： connectWith: '.area' 并且您不需要您的 droppable
目标是在任何时候只显示一个可排序的。单击当前显示的“选项卡”控件。因此，在两者之间移动小部件的唯一方法是将 sortable 拖放到与 sortable 共享相同 tabid 的选项卡上。

标签： jquery jquery-ui

【解决方案1】：

我认为 drop 事件触发得太快了，在成功的 drop 尝试之后，所以 drop 事件被检测到，但在 drop 实际发生之前。

如果你改变了

ui.draggable.appendTo(targetarea);

到

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

有效

【讨论】：