4

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

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

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

有没有办法检查并确定？

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

4

2 回答 2

4

我在 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/

于 2013-07-28T02:48:06.767 回答
2

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

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

编辑：

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

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

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

于 2013-07-28T02:09:06.990 回答