Vue 也能实现拖拽了 (vue-dragging)
2020-06-17 本文已影响0人
酷酷的凯先生
前言
vue-dragging 的 npm 包的名字是 awe-dnd
,并不是 vue-dragging,
特点 : 封装了 v-dragging
全局指令,然后通过全局指令去数据绑定等。
相比及 vuedraggable 来说, awe-dnd 是没有暴露双向绑定的方式,因此提供了事件,在拖拽结束的时候用来更新列表或者是去触发父组件监听的事件。
如何使用
第一步: 安装
npm install awe-dnd --save
第二步: 引入
main.js 文件
// 引入组件
import VueDND from 'awe-dnd'
// 添加至全局
Vue.use(VueDND)
第三步: 使用
<template>
<div class="color-list">
<div class="color-item"
v-for="item in dataList" v-dragging="{ item: item, list: dataList, group: 'color' }"
:key="color.text">
{{item .text}}</div>
</div>
</template>
<script>
export default {
data () {
return {
dataList: [{
text: "red"
}, {
text: "blue"
}, {
text: "Gold"
},{
text: "Blueviolet"
}, {
text: "Lightblue"
}, {
text: "Cornflowerblue"
}]
}
}
}
</script>
童鞋们发现一个特殊指令: v-dragging="{ item: item, list: dataList, group: 'color' }"
这种形式进行指令绑定,其中 item
就是单个对象,而 list
则是数据列表,group
则是用来声明一个组,来保证可以在一个页面中进行多个数据源的操作。
还有提供两个方法:
export default {
mounted () {
this.$dragging.$on('dragged', ({ val }) => {
console.log(val .item)
console.log(val .list)
console.log(val .otherData)
})
this.$dragging.$on('dragend', (res) => {
console.error(res);
})
}
}