JQuery UI - 将 Draggable 附加到 Droppable答案

【问题标题】：JQuery UI - Append Draggable to DroppableJQuery UI - 将 Draggable 附加到 Droppable
【发布时间】：2013-08-06 22:21:26
【问题描述】：

如何使用 jQueryUI 的 draggables/dropables 将被拖动的项目附加到放置的目标元素？看起来 jQuery UI 现在的工作方式只是通过绝对定位在屏幕上移动项目。不幸的是，此功能使表单提交变得无用，因为您无法在提交时获取值的位置。

提前感谢任何项目/指针！

【问题讨论】：

根据我的经验，它实际上修改了 DOM 以反映新的定位；我知道是因为我用它更新列表（通过 AJAX），这涉及在“完成”回调中扫描新的 div 顺序。你想做什么？
你到底想做什么？听起来您可能正在寻找可排序而不是拖动：jqueryui.com/demos/sortable

标签： javascript jquery

【解决方案1】：

如果我理解正确，您希望拖动的元素与其当前父元素分离并附加到新元素，对吗？您可以使用助手进行拖动（因此原始元素不受影响），并在放置时将其分离并将其附加到目标（感谢@Oleg 和@Brian 改进了我的原始答案）。

$(myDraggable).draggable({
    helper:"clone",
    containment:"document"
});

$(myDroppable).droppable({
    drop:function(event, ui) {
        ui.draggable.detach().appendTo($(this));
    }
});

jsFiddle的工作示例

【讨论】：

非常感谢您的帮助 mgibsonbr！非常感谢您花费时间和精力来写这篇文章！
这个很有用，谢谢
您不需要为此使用任何全局变量 - ui.helper 是您的可拖动 jq 对象。您可以摆脱启动/停止方法，并且在放置时应该是 ui.helper.detach().appendTo($(this))。
@Oleg 感谢您的提示，正如我所说的，我确信有更好的方法...您是否想发布您的解决方案作为答案（以便我和其他人可以投票）或我可以更新我的吗？如果需要，请随时使用我的updated fiddle。
ui.helper.detach().appendTo($(this)) 对我不起作用，而 ui.draggable.detach().appendTo($(this)) 对我起作用。根据文档，我认为在这种情况下使用ui.draggable 是正确的。