vue中使用拖拽插件
先看效果安装npm install awe-dnd --save在main.js中,通过Vue.use导入插件import VueDND from 'awe-dnd'Vue.use(VueDND)组件中使用的案例<template><!-- 要拖拽的列表 --><div class="color-list"&...
·
先看效果
安装
npm install awe-dnd --save
在main.js中,通过Vue.use导入插件
import VueDND from 'awe-dnd'
Vue.use(VueDND)
组件中使用的案例
<template>
<!-- 要拖拽的列表 -->
<div class="color-list">
<!-- 要拖拽模块 -->
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color',}"
:key="color.text"
>{{color.text}}</div>
</div>
</template>
<script>
export default {
data () {
return {
colors: [{
text: "Aquamarine"
}, {
text: "Hotpink"
}, {
text: "Gold"
}, {
text: "Crimson"
}, {
text: "Blueviolet"
}, {
text: "Lightblue"
}, {
text: "Cornflowerblue"
}, {
text: "Skyblue"
}, {
text: "Burlywood"
}]
}
},
mounted () {
//带参添加拖拽事件
this.$dragging.$on('dragged', ({ value }) => {
console.log(value.item) //打印拖拽的当前item的颜色
console.log(value.list)
//console.log(value.otherData)
})
//无参添加拖拽事件
this.$dragging.$on('dragend', () => {
})
}
}
//插件参数解析
// item Object类型 每一个可拖拽的对象
// list Array类型 可拖拽对象的数组
// group String类型 key值
</script>
<style scoped>
.color-item{
height: 30px;
margin-top: 10px;
line-height: 30px;
text-align: center;
border:1px solid black;
}
.color-item:nth-child(odd){
background:yellowgreen;
}
</style>
插件参数解析
item Object类型 每一个可拖拽的对象
list Array类型 可拖拽对象的数组
group String类型 key值
更多推荐
已为社区贡献28条内容
所有评论(0)