Question

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

中

如果我将div拖到“snaptarget”div 将拖动的div显示为DOM中的子元素吗？我在浏览器上点击了f12并看到位置随着我的拖动而变化，但是显示拖动的，已删除的div的父保持不变。

我认为droppable http://jqueryui.com/droppable/

也是如此

有没有办法检查并确定？

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

Answer 1

拖动的元素可以复制或移植为放置目标的子项（取决于您为helper option选择的内容）。

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

编辑：

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

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

以下是演示：http://jsfiddle.net/VTHcG/

Answer 2

我得到了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/

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

2 个答案: