javascript JQuery UI - 将 Draggable 附加到 Droppable

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10711602/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 10:46:56  来源:igfitidea点击:

JQuery UI - Append Draggable to Droppable

javascriptjquery

提问by user1110302

How do you append an item being dragged to a target element on drop, using jQueryUI's draggables/dropables? It looks like the way jQuery UI works right now is it just moves the items around on the screen via absolute positioning. Unfortunately, this functionality makes form submissions useless, as you cannot get the positions of the values on submission.

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

Thanks in advance for any items/pointers!

提前感谢您提供任何项目/指针!

回答by mgibsonbr

If I understood correctly, you want the dragged element to be detached from it's current parent and be appended to the new one, right? You can use a helper to do the dragging (so the original element is not affected) and, upon drop, detach it and append it to the target (thanks @Oleg and @Brian for improving over my original answer).

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

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

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

? Working example at jsFiddle

? jsFiddle 的工作示例