Javascript:使用拖放在屏幕上重新排列 div

Question

我目前在屏幕上的一个 div 容器中有 6 个名为 'tile' 的方 block ，如下所示:

<div id="Container">
    <div id="tile1" class="tile"> </div>
    <div id="tile2" class="tile"> </div>
    <div id="tile3" class="tile"> </div>
    <div id="tile4" class="tile"> </div>
    <div id="tile5" class="tile"> </div>
    <div id="tile6" class="tile"> </div>
</div>

每个正方形为 100 像素 x 100 像素并向左浮动，以 2 行 3 的形式出现。每个正方形包含其内部的图 block 编号，例如图 block 1 -> 1，图 block 2 -> 2。

我希望能够拖动并重新排列这些图 block 。

例如，

如果我将图 block 6 拖动到位置 1，图 block 6 会出现在位置 1 并且其他图 block 会被一起推:

tile6 -> pos1

tile1 -> pos2

tile2 -> pos3

tile3 -> pos4

tile4 -> pos5

tile5 -> pos6

Answer 1

您可以使用 jQuery UI Sortable 插件。它具有完全相同的功能。请参阅此演示页面。

https://jqueryui.com/sortable/

*从右侧菜单中选择显示为网格示例。