jQuery UI-将可拖动追加到可拖放 [英] JQuery UI - Append Draggable to Droppable

问题描述

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

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.

在此先感谢您提供任何物品/指针！

Thanks in advance for any items/pointers!

推荐答案

如果我正确理解，您希望将拖动的元素与当前父元素分离并附加到新父元素上，对吗?您可以使用助手进行拖动(这样就不会影响原始元素)，放下后将其分离并附加到目标上(感谢@Oleg和@Brian改善了我的原始答案).

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).

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

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

jsFiddle

这篇关于jQuery UI-将可拖动追加到可拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！