元素拖拽排序

产品有个需求，需要将DIV拖拽排序
凭着JS插件无所不包的信念
很快就找到了

https://github.com/SortableJS/Sortable

满满的例子

https://sortablejs.github.io/Sortable/

引入库

    <script src="Sortable.min.js"></script>

创建div阵列

    <div id="grid" class="row">
        <h4 class="col-12">Grid Example</h4>
        <div id="gridDemo" class="col">
            <div class="grid-square">Item 1</div>
            <div class="grid-square">Item 2</div>
            <div class="grid-square">Item 3</div>
            <div class="grid-square">Item 4</div>
            <div class="grid-square">Item 5</div>
            <div class="grid-square">Item 6</div>
            <div class="grid-square">Item 7</div>
            <div class="grid-square">Item 8</div>
            <div class="grid-square">Item 9</div>
            <div class="grid-square">Item 10</div>
            <div class="grid-square">Item 11</div>
            <div class="grid-square">Item 12</div>
            <div class="grid-square">Item 13</div>
            <div class="grid-square">Item 14</div>
            <div class="grid-square">Item 15</div>
            <div class="grid-square">Item 16</div>
            <div class="grid-square">Item 17</div>
            <div class="grid-square">Item 18</div>
            <div class="grid-square">Item 19</div>
            <div class="grid-square">Item 20</div>
        </div>
    </div>

阵列添加样式

    <style>
        .grid-square {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: #fff;
            border: solid 1px rgb(0, 0, 0, 0.2);
            padding: 10px;
            margin: 12px;
        }
    </style>

阵列添加JS

    <script>
        Sortable.create(gridDemo, { /* options */ });
    </script>

image.png