如何用vue-draggable实现长尾词的三级拖动排序功能?
- 内容介绍
- 文章标签
- 相关推荐
本文共计2840个文字,预计阅读时间需要12分钟。
在Vue项目中,若需要实现拖动排序功能,可以考虑使用vue-draggable。最初计划使用jQuery UI的拖动功能,但发现其与预期不符,且不确定是否与Vue.js兼容。尝试后发现,vue-draggable可以满足需求。
vue-draggable
之前项目中需要用到拖动排序,就去网上找资料,本来最开始是想用jquery-ui里的拖动的,后面发现不符合我的预期也不知道能不能跟vue.js兼容,后面我试过了,单个的可以但是层级太多就不一样了。
废话少说直接上代码
先看数据结构,和页面的呈现,等会再来上代码。
这就是三层结构渲染出来的图。那个海锚一样的东西是可以点击的,点击后会出现当前类型所带的产品。等会会说的
我们现在来看下我实现后的拖动效果,如下
所有父类型里面的产品拖动如下
控制台的打印
好了,放了那么多图,数据结构也发了。接下来我们来上代码和思路。
本文共计2840个文字,预计阅读时间需要12分钟。
在Vue项目中,若需要实现拖动排序功能,可以考虑使用vue-draggable。最初计划使用jQuery UI的拖动功能,但发现其与预期不符,且不确定是否与Vue.js兼容。尝试后发现,vue-draggable可以满足需求。
vue-draggable
之前项目中需要用到拖动排序,就去网上找资料,本来最开始是想用jquery-ui里的拖动的,后面发现不符合我的预期也不知道能不能跟vue.js兼容,后面我试过了,单个的可以但是层级太多就不一样了。
废话少说直接上代码
先看数据结构,和页面的呈现,等会再来上代码。
这就是三层结构渲染出来的图。那个海锚一样的东西是可以点击的,点击后会出现当前类型所带的产品。等会会说的
我们现在来看下我实现后的拖动效果,如下
所有父类型里面的产品拖动如下
控制台的打印
好了,放了那么多图,数据结构也发了。接下来我们来上代码和思路。

