1.npm安装
$ npm install awe-dnd --save
2.在main.js中,通过Vue.use导入插件
import VueDND from 'awe-dnd'
Vue.use(VueDND)
3.vue文件使用
<template>
<div class="color-list">
<div
class="color-item"
v-for="item in list"
v-dragging="{ item: item, list: list }"
:key="item.text"
>
{{ item.text }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
text: "Aquamarine",
},
{
text: "Hotpink",
},
{
text: "Gold",
},
],
};
},
mounted() {
this.$dragging.$on("dragged", ({ value }) => {
console.log(value.list);
});
this.$dragging.$on("dragend", () => {});
},
};
</script>