vue可用于拖动排序组件示例
作者：AshleyLv
这篇文章主要为大家介绍了vue可用于拖动排序组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
介绍
vue-dragging 一款可任意拖动排序的vue插件。支持桌面和移动端，拖拽过渡动画美观。支持vue1和vue2版本。非常实用。
安装
通过NPM安装
$ npm install awe-dnd --save
插件应用
在main.js中，通过Vue.use导入插件
import VueDND from 'awe-dnd' Vue.use(VueDND)
在你的vue文件中这样引用
<script>
export default {
data () {
return {
colors: [{
text: "Aquamarine"
}, {
text: "Hotpink"
}, {
text: "Gold"
}, {
text: "Crimson"
}, {
text: "Blueviolet"
}, {
text: "Lightblue"
}, {
text: "Cornflowerblue"
}, {
text: "Skyblue"
}, {
text: "Burlywood"
}]
}
}
}
</script>
<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>vue2.0的使用方式
<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>vue1.0的使用方式
<div class="color-list">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', key: color.text }"
track-by="text"
>{{color.text}}</div>
</div>添加事件
<div class="color-list">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', otherData: otherData }"
:key="color.text"
>{{color.text}}</div>
</div>export default {
mounted () {
this.$dragging.$on('dragged', ({ value }) => {
console.log(value.item)
console.log(value.list)
console.log(value.otherData)
})
this.$dragging.$on('dragend', () => {
})
}
}以上就是vue可用于拖动排序组件示例的详细内容，更多关于vue拖动排序组件的资料请关注脚本之家其它相关文章！