vuedraggable嵌套块拖拽_vuedraggable 两个不同结构的数组之间拖拽

官方文档:

需求

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

来实现收藏的功能.

需求:

能从未收藏区域, 拖动到已收藏的区域

未收藏的菜单区域, 不能拖动排序(顺序是排好的)

未收藏的菜单区域, 不能从已收藏的菜单中拖回来

已收藏的菜单, 点击删除后, 按原顺序回到未收藏的菜单中

数据结构如下:

+---------------------+ +---------------+

| Collection | | Menu |

+---------------------+ 1 1 +---------------+

|-id:String |--------------|-id:String |

|-collectedTime:Date | -menu |-name:String |

+---------------------+ +---------------+

实现

代码片段

模板:

:group='{name: "menu", put: true}'

@add='addCollection'

@update='sortCollection'

:value="collections">

@delete='deleteCollection'

:deletable='modified'