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

官方文档:

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

需求

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

需求:

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

使用的是 vuedraggable

数据结构如下:

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