效果图
一、安装
npm install awe-dnd --save
二、在main.js中引入
import VueDND from 'awe-dnd'
Vue.use(VueDND)
三、完整代码
<template>
<div class="content">
<span
:style="{ 'background-color': item.color }"
v-for="(item, index) in colorList"
v-dragging="{ item: item, list: colorList, group: 'item' }"
:key="index"
>{{ item.color }}</span
>
</div>
</template>
<script>
export default {
data() {
return {
colorList: [
{ color: "#2ec7c9" },
{ color: "#b6a2de" },
{ color: "#5ab1ef" },
{ color: "#ffb980" },
{ color: "#d87a80" },
{ color: "#8d98b3" },
{ color: "#e5cf0d" },
{ color: "#97b552" },
{ color: "#95706d" },
{ color: "#dc69aa" },
{ color: "#07a2a4" },
{ color: "#9a7fd1" },
{ color: "#588dd5" },
{ color: "#f5994e" },
{ color: "#c05050" },
{ color: "#59678c" },
{ color: "#c9ab00" },
{ color: "#7eb00a" },
{ color: "#6f5553" },
{ color: "#c14089" },
],
};
},
mounted() {
// 拖拽后触发的事件
this.$dragging.$on("dragged", (res) => {
console.log(res);
});
},
};
</script>
<style>
.content {
width: 500px;
margin: 20px auto;
text-align: left;
}
.content span {
color: white;
width: 50%;
height: 50px;
line-height: 50px;
text-align: center;
display: inline-block;
}
</style>
