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的draggables / dropables将项目拖放到drop上的目标元素?它看起来像jQuery UI现在的工作方式是它只是通过绝对定位移动屏幕上的项目。遗憾的是,此功能使表单提交无效,因为您无法在提交时获取值的位置。
Thanks in advance for any items/pointers!
提前感谢任何物品/指针!
1 个解决方案
#1
24
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的工作示例
#1
24
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的工作示例