Question

我希望能够将一个元素从一个div内部拖到另一个div中。

jQuery UI draggable和droppable，但他们似乎只是使用position:relative在视觉上操纵元素，而不是通过DOM移动它们。如果他们可以，我似乎无法找到一个例子或弄清楚如何。

说我是否有两个简单的div，例如：

<div id="firstDiv">
    <div id="moveMe">I need to be moved to secondDiv</div>
</div>
<div id="secondDiv">
</div>

#moveMe如何将#firstDiv拖放到#secondDiv？

Answer 1

它不是在操纵DOM，因为据我所知，他们的目的是做什么的。

如果您想操纵DOM，那么您可以使用以下技巧

您可以在删除元素时使用helper option，那么，阅读坐标，然后使用jQuery Clone功能将原始div#moveMe克隆到放置区#secondDiv AND THEN 删除原始元素#firstDiv > div#moveMe

Answer 2

功能相当简单，但可能会产生不可预测的结果。问题在于，正如您所提到的那样，position: relative设置对象将从删除位置改变位置，因为它现在将变为相对于新父级的位置。要解决此问题，每次放下对象时都必须重新计算位置。

通过查找过去父母与新父母的位置以及新偏移，这仍然可以相当简单地完成。

这整个功能可以像这样完成

$(document).ready(function () {
  $( "#draggable" ).draggable();
  $( ".droppable" ).droppable({
      drop: function( event, ui ) {
        //Get the position before changing the DOM
        var p1 = ui.draggable.parent().offset();
        //Move to the new parent
        $(this).append(ui.draggable);
        //Get the postion after changing the DOM
        var p2 = ui.draggable.parent().offset();
        //Set the position relative to the change
        ui.draggable.css({
          top: parseInt(ui.draggable.css('top')) + (p1.top - p2.top),
          left: parseInt(ui.draggable.css('left')) + (p1.left - p2.left)
        });
      }
    });
});

查看此CodePen以获取一个工作示例：http://codepen.io/anon/pen/KfDyj/。

将元素从一个div内拖到另一个div中

2 个答案: