Vue2 - 详细实现列表拖曳排序功能，列表或表格自定义元素拖动排序效果，用鼠标按住拖动列表进行手动排序并颠倒排序顺序时有动画，用户鼠标或手势拖动列表改变排序顺序（支持滚动条内嵌套列表，贴边会自动下移

前言

如果您需要 Vue3 版本，请访问 这篇文章。

在 vue2 | nuxt2 开发中，详解列表拖拽改变排序顺序功能，用户使用鼠标或触摸拖动对自定义列表进行拖曳排序并改变排列顺序（拖动元素进行排序并且带有过渡动画效果），支持任意样式列表、搭配组件库表格组件实现拖动排序、奇形怪状列表均可以实现拖拽改变排列顺序，列表数据自动调换顺序轻松和服务端进行对接，遇到列表出现滚动条时依然可以 “丝滑排序”，尽管列表被隐藏依旧可以拖动着某一项向上或向下顶边移动，支持电脑 PC 网站和手机移动端 H5 网页。

您直接复制代码运行，新手小白改下样式即可。

---

如下图示例所示，电脑和手机端都可以使用，并且丝滑流畅且强大可靠。

第一步

首先，