如何用vue-draggable实现长尾词的三级拖动排序功能?

2026-04-05 10:050阅读0评论SEO资源
  • 内容介绍
  • 文章标签
  • 相关推荐

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

如何用vue-draggable实现长尾词的三级拖动排序功能?

在Vue项目中,若需要实现拖动排序功能,可以考虑使用vue-draggable。最初计划使用jQuery UI的拖动功能,但发现其与预期不符,且不确定是否与Vue.js兼容。尝试后发现,vue-draggable可以满足需求。

vue-draggable

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

废话少说直接上代码

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

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

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

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

控制台的打印

如何用vue-draggable实现长尾词的三级拖动排序功能?

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

阅读全文

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

如何用vue-draggable实现长尾词的三级拖动排序功能?

在Vue项目中,若需要实现拖动排序功能,可以考虑使用vue-draggable。最初计划使用jQuery UI的拖动功能,但发现其与预期不符,且不确定是否与Vue.js兼容。尝试后发现,vue-draggable可以满足需求。

vue-draggable

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

废话少说直接上代码

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

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

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

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

控制台的打印

如何用vue-draggable实现长尾词的三级拖动排序功能?

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

阅读全文