官方文档:
需求
最近做一个菜单收藏功能. 界面交互: 将没有收藏的菜单, 拖到已收藏的菜单中,
来实现收藏的功能.
需求:
能从未收藏区域, 拖动到已收藏的区域
未收藏的菜单区域, 不能拖动排序(顺序是排好的)
未收藏的菜单区域, 不能从已收藏的菜单中拖回来
已收藏的菜单, 点击删除后, 按原顺序回到未收藏的菜单中
数据结构如下:
+---------------------+ +---------------+
| 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'
:collection='collection'>
:group='{name: "menu", put: false}'
:sort='false'
:value="notCollectedMenus">
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 排序
能从未收藏区域, 拖动到已收藏的区域
两个 draggable 节点中, group 的 name 是一样的, 这样就可以实现两个区域的相互拖拽.
未收藏的菜单区域, 不能拖动排序(顺序是排好的)
未收藏的 draggable 节点中加上 :sort='false'
未收藏的菜单区域, 不能从已收藏的菜单中拖回来
未收藏的 draggable 节点中, group 添加 put: false
已收藏的菜单, 点击删除后, 按原顺序回到未收藏的菜单中
该需求没有拖出要求, 从 collections 数组中删除, 通过计算属性 notCollectedMenus
来添加到下面的区域.