如何利用vue-draggable组件实现复杂的三级拖拽排序功能？

本文共计2859个文字，预计阅读时间需要12分钟。

在使用vue-draggable之前，项目中需要实现拖拽排序功能，便去网上查找资料。最初是想使用jQuery UI的拖拽功能，但后来发现不符合预期，也不知是否与Vue.js兼容。后来尝试过，单个的可以，但整体使用中存在问题。

vue-draggable

之前项目中需要用到拖动排序，就去网上找资料，本来最开始是想用jquery-ui里的拖动的，后面发现不符合我的预期也不知道能不能跟vue.js兼容，后面我试过了，单个的可以但是层级太多就不一样了。

废话少说直接上代码

先看数据结构，和页面的呈现，等会再来上代码。

这就是三层结构渲染出来的图。那个海锚一样的东西是可以点击的，点击后会出现当前类型所带的产品。等会会说的

我们现在来看下我实现后的拖动效果，如下

所有父类型里面的产品拖动如下

控制台的打印

好了，放了那么多图，数据结构也发了。接下来我们来上代码和思路。