vuedraggable 两个不同结构的数组之间拖拽

OWEN774136821

于 2019-04-09 11:30:00 发布

阅读量3k

点赞数

文章标签： javascript 数据结构与算法 ViewUI

原文链接：http://www.cnblogs.com/hsnotebook/p/10656002.html

版权

本文介绍了如何利用vuedraggable组件实现不同结构的数组之间进行拖拽操作的需求，特别是在一个不允许排序的菜单列表中，将元素拖动到另一个可收藏的菜单列表中。详细讲解了数据结构、代码片段和实现说明，包括拖进、排序以及处理删除操作的逻辑。同时，指出了vuedraggable在不同构数组间的限制及其解决方法。

摘要由CSDN通过智能技术生成

官方文档:

需求

最近做一个菜单收藏功能. 界面交互: 将没有收藏的菜单, 拖到已收藏的菜单中,
来实现收藏的功能.

需求:

能从未收藏区域, 拖动到已收藏的区域
未收藏的菜单区域, 不能拖动排序(顺序是排好的)
未收藏的菜单区域, 不能从已收藏的菜单中拖回来
已收藏的菜单, 点击删除后, 按原顺序回到未收藏的菜单中

使用的是 vuedraggable

数据结构如下:

+---------------------+              +---------------+
|    Collection       |              |       Menu    |
+---------------------+ 1          1 +---------------+
|-id:String           |--------------|-id:String     |
|-collectedTime:Date  | -menu        |-name:String   |
+---