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顺序的容器的“stop”事件。

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

所以，有些伪代码：

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

如何使用JS，jQuery或D3移动DOM中的节点元素

1 个答案: