Swapy让任何布局变为可拖拽

旺东

文章最后更新时间:2024年09月09日

Swapy 让任意布局变为可拖拽

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

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

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

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

演示:

Swapy.gif

安装:

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>

发表评论

快捷回复:表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
验证码
评论列表 (暂无评论,291人围观)

还没有评论,来说两句吧...

取消
微信二维码
微信二维码
支付宝二维码