在 dom 中拖放并更改 div 的父级答案

【问题标题】：drag drop and change parent of a div in dom在 dom 中拖放并更改 div 的父级
【发布时间】：2013-07-28 01:53:29
【问题描述】：

在http://jqueryui.com/draggable/#snap-to

如果我将一个 div 拖到“snaptarget”div。
拖动的 div 会在其内部显示为 DOM 中的子元素吗？
我在浏览器上按 f12 并看到位置坐标在我拖动时发生了变化，但显示该拖放的 div 的父级没有改变。

我认为 droppable http://jqueryui.com/droppable/ 也会发生同样的情况

有没有办法检查和确定？

我确实想要这个功能，因为我想将一个 div 拖到另一个，然后知道该 div 的父级。

【问题讨论】：

我已经更新了我的答案。

标签： javascript jquery jquery-ui dom

【解决方案1】：

我在 Asad 的帮助下成功了

http://jsfiddle.net/4bmT9/1/

发现这件奇妙的东西是别人做的

http://jsfiddle.net/l33r0y/yrLbE/48/

JS：

$('.dragme').draggable();
$('#drop, #source').droppable({
    drop:function(e, ui) {
        $(e.target).append($(ui.draggable).detach().css({'top':'', 'left':''}));
    }
});

HTML：

<div id="source" class="box">
    <div class="dragme">bacon</div>

</div>
<div id="drop" class="box"></div>

CSS：

.box { height:100px;width:100px;border:1px solid #333; }
.dragme { width:100%; margin:5px; border:1px solid #333; }

这是一个演示：http://jsfiddle.net/4bmT9/1/

【讨论】：

马苏德，你应该接受最有效的答案，不管它是否是你自己的。
好主意，如果您愿意，请在您的回答中引用我的回答。你是提出这个想法的人。所以接受你的。 :) 。如果人们喜欢它，我会得到支持。所以没关系。

【解决方案2】：

拖动的元素要么被复制，要么被移植为放置目标的子元素（取决于您为helper option 选择的内容）。

为了更明确地说明这一点，在 droppable 元素下将有一个 DOM 节点，其中包含可拖动元素。

编辑：

看来我错了。这不是默认行为，但您可以执行以下操作：

$(".target").droppable({
    accept: '.draggable',
    drop: function(event, ui) {
        $(this).append(ui.draggable);
    }
});
$(".draggable").draggable();

这是一个演示：http://jsfiddle.net/VTHcG/

【讨论】：

@MasoodAhmad 你要把它放到droppable 元素中吗？
现在可以使用了。谢谢。加 1. 虽然这里有一些问题（关于拖动更改的大小） 2. 将它重新拖动到另一个 div 怎么样？所以现在有 2 个父 div（doppables）和一个可以多次输入的可拖动对象