JQuery UI - 将Draggable附加到Droppable

use*_*302 13 javascript jquery

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

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

mgi*_*nbr 24

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

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

$(myDroppable).droppable({
    drop:function(event, ui) {
        ui.draggable.detach().appendTo($(this));
    }
});
Run Code Online (Sandbox Code Playgroud)

jsFiddle的工作示例

  • 你不需要使用任何全局变量 - ui.helper是你的可拖动jq对象.你可以摆脱启动/停止方法,并且它应该是ui.helper.detach().appendTo($(this)). (2认同)
  • `ui.helper.detach().appendTo($(this))`对我来说不起作用,而`ui.draggable.detach().appendTo($(this))`的确如此.根据文档,我认为在这种情况下使用`ui.draggable`是正确的. (2认同)