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

Question

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

<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乘100px并向左浮动，出现在2行3中。每个正方形包含它的内部瓷砖编号。 tile1 - ＆gt; 1，tile2 - ＆gt; 2。

我希望能够拖动并重新排列这些瓷砖。

例如，

如果我将图块6拖到位置1，图块6将显示在位置1，其他图块将被推入：

tile6 - ＆gt; POS1

tile1 - ＆gt; POS2

tile2 - ＆gt; POS3

tile3 - ＆gt; POS4

tile4 - ＆gt; POS5

tile5 - ＆gt; pos6

Answer 1

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

https://jqueryui.com/sortable/

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