JQuery UI - 将Draggable附加到Droppable

Question

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

在此先感谢任何项目/指针！

Answer 1

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

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

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

jsFiddle的工作示例