Swapy 让任意布局变为可拖拽

Swapy 一个简单的 JavaScript 工具，只需几行代码即可将任何布局转换为拖放交换布局。

指定插槽和项目：为插槽元素添加data-swapy-slot属性，为项目元素添加data-swapy-item属性，还可以通过data-swapy-handle指定手柄，通过 CSS 样式[data-swapy-highlighted]自定义当前选择的插槽。

使用 Swapy：获取包含插槽和项目的容器元素，将其传递给createSwapy()，默认使用dynamic动画，可通过动画配置选项更改，并且可以随时禁用和启用。

监听事件：可以监听交换事件，交换事件会返回新顺序的三种版本（map、object和array），方便进行相关操作，如存储新顺序。

演示：

安装：

pnpm install swapy

CDN：

<script src="https://unpkg.com/swapy/dist/swapy.min.js"></script>

<script>

  // You can then use it like this

  const swapy = Swapy.createSwapy(container)

</script>

Swapy