如何使用 JS、jQuery 或 D3 在 DOM 中移动节点元素 [关闭]

Question

全部：

我想知道如何使用 JS、jQuery 或 D3 在 DOM 中移动元素：

例如：

<div class="container"  style="width:100%;height:100%;">
    <div class="item" style="width:50%; height:40%; float:left;">DIV1</div>
    <div class="item" style="width:40%; height:40%; float:left;">DIV2</div>
    <div class="item" style="width:50%; height:40%; float:left;">DIV3</div>
    <div class="item" style="width:40%; height:40%; float:left;">DIV4</div>
</div>

所以基本上现在显示的布局是 2X2，我想要做的只是拖动 DIV1 并移动到 DIV4 然后他们可以交换位置。我有点想使用数组交换元素的方式，从 DOM 数组中复制 DIV1 DOM 元素，将 DIV4 复制到该位置并将 DIV1 复制到该数组中的 DIV4 位置。

但我不知道这是否可行，如果可以，如何实现？

谢谢

Answer 1

看看 jqueryUI 添加的可拖动支持：https://jqueryui.com/draggable/

要让拖动事件更新您的后端，您需要将一个函数绑定到容器的“停止”事件，以查询 div 的结果顺序。

这将涉及向 DIV 添加一些行为，以便它们按照您的设想行事。任何未拖动的 div 都需要知道您何时尝试将另一个 div 拖放到页面上，其中对象（或鼠标指针）上的某些已定义句柄位于未拖动元素之前或之后。

所以，一些伪代码：

onStop: function(item){ checkPointerLocation(); insertDraggedObjectBeforeNearest() }