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 |
+---------------------+ +---------------+

实现

代码片段

模板:

<draggable
:group='{name: "menu", put: true}'
@add='addCollection'
@update='sortCollection'
:value="collections">

<collection-item
@delete='deleteCollection'
:deletable='modified'
:collection='collection'>

js:

data: function () {
return {
collections: [],
availableMenus: [],
}
},
computed: {
notCollectedMenus: function () {
return this.availableMenus.filter(menu => {
let collection = this.collections.find(collection => collection.menu.id === menu.id)
return collection == undefined ? true : false
})
},
},
methods: {
deleteCollection (collectionToBeDeleted) {
let index = this.collections.findIndex(collection => collection.id == collectionToBeDeleted.id)
this.collections.splice(index, 1)
},
addCollection (evt) {
let newCollectionIndex = evt.newIndex
let menuIndex = evt.oldIndex

let menu = this.notCollectedMenus[menuIndex]
let newCollection = {}
newCollection.menu = menu
newCollection.username = this.username
this.collections.splice(newCollectionIndex, 0, newCollection)
},
sortCollection (evt) {
let newIndex = evt.newIndex
let oldIndex = evt.oldIndex

let collection = this.collections[oldIndex]
this.collections.splice(oldIndex, 1)
this.collections.splice(newIndex, 0, collection)
},
}

• collections 为收藏的数组, 里面的对象为 Collection,
• availableMenus 为所有可被收藏菜单的数组, 里面的对象为 Menu
• notCollectedMenus 为一个计算值, 为没有被收藏菜单的数组, 里面的对象为 Menu

实现说明

vuedraggable 中, 不能使用 v-model, 而使用 value 属性.
v-model 会在排序, 拖进, 拖出的时候, 修改数组的内容, 而两个数组是不同构的,
这样程序会出错的.

既然不能用 v-model 来自动操作数据, 所以对应的排序, 拖进, 拖出操作,
需要自己来写相应的事件处理.

• add 拖进
• update 排序

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

   两个 draggable 节点中, group 的 name 是一样的, 这样就可以实现两个区域的相互拖拽.

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

   未收藏的 draggable 节点中加上 :sort='false'

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

   未收藏的 draggable 节点中, group 添加 put: false

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

   该需求没有拖出要求, 从 collections 数组中删除, 通过计算属性 notCollectedMenus
   来添加到下面的区域.