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

最新推荐文章于 2024-04-23 19:18:03 发布

转载

最新推荐文章于 2024-04-23 19:18:03 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

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

文章标签：

#javascript #数据结构与算法 #ViewUI

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

官方文档:

https://github.com/SortableJS/Vue.Draggable
https://github.com/SortableJS/Sortable

需求

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

需求:

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

使用的是 vuedraggable

数据结构如下:

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