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

Question

我目前在 div 容器内的屏幕上有 6 个名为 'tile' 的方块，如下所示：

<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>

每个正方形是 100px x 100px 并且向左浮动，以 2 行 3 的形式出现。每个正方形包含其内部的图块编号，例如tile1 -> 1, tile2 -> 2.

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

例如，

如果我将图块 6 拖到位置 1，图块 6 会出现在位置 1 中，而其他图块会被推动：

tile6 -> 位置 1

tile1 -> 位置2

tile2 -> 位置 3

tile3 -> pos4

tile4 -> pos5

tile5 -> 位置 6

Answer 1

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

https://jqueryui.com/sortable/

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