2024年11月03日 建站教程
前面介绍了很多款原生的拖拽功能，今天给大家介绍一款awe-dnd插件，它比前面一种写法都要简单，下面我们来学习一下！
1、安装依赖
npm install awe-dnd --save //或 yarn add awe-and
2、全局引入main.js
import awednd from 'awe-dnd' Vue.use(awednd)
3、代码实现
<template>
<div>
<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>
</div>
</template>
<script>
export default {
data() {
return {
drag: false,
colors: [
{
text: "Aquamarine",
},
{
text: "Hotpink",
},
{
text: "Gold",
},
{
text: "Crimson",
},
{
text: "Blueviolet",
},
{
text: "Lightblue",
},
{
text: "Cornflowerblue",
},
{
text: "Skyblue",
},
{
text: "Burlywood",
},
],
};
},
};
</script>
<style scoped>
/*被拖拽对象的样式*/
.item {
padding: 6px;
background-color: #fdfdfd;
border: solid 1px #eee;
margin-bottom: 10px;
cursor: move;
}
/*选中样式*/
.chosen {
border: solid 1px #3089dc !important;
}
</style>
本文链接：http://so.lmcjl.com/news/16876/