1、安装插件 npm i vuedraggable
2、官网:vue.draggable一款基于vue的拖拽插件 - itxst.com
3、使用
<!--使用draggable组件 v-model绑定数组-->
<draggable v-model="myArray" @start="onStart" @end="onEnd">
<transition-group>
<div class="item" v-for="item in myArray" :key="item.id">{{item.name}}</div>
</transition-group>
</draggable>
import draggable from "vuedraggable";
export default {
components: {
draggable,
},
data() {
return {
myArray: [
{people:'cn',id:10,name:'www.itxst.com'},
{people:'cn',id:20,name:'www.baidu.com'},
{people:'cn',id:30,name:'www.taobao.com'},
{people:'us',id:40,name:'www.yahoo.com'}
],
};
},
methods: {
/ /设置禁止拖拽
// setJY(){
// this.disabled=true;
// },
// //设置启用拖拽
// setQY(){
// this.disabled=false;
// },
//开始拖拽事件
onStart() {
this.drag = true;
},
//拖拽结束事件
onEnd() {
this.drag = false;
},
}
}
.item {
padding: 6px;
background-color: #fdfdfd;
border: solid 1px #eee;
margin-bottom: 10px;
cursor: move;
}
.item:hover {
background-color: #f1f1f1;
cursor: move;
}
.chosen {
border: solid 2px #3089dc !important;
}