文档
https://www.itxst.com/vue-draggable/zaaeyv73.html
安装
npm install vuedraggable
导入
在你需要用到的vue页面导入
注意要以component的形式导入
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable
},
data() {
return {
list: [
{
id:1, name: "Java"},
{
id:2, name: "Python"},
{
id:3, name: "PHP"},
{
id:4, name: "C"}
]
}
},
简单使用
# draggable要包裹你的容器
# 绑定list,即可拖动的列表数据
# tag指定标签
# v-bind绑定拖动动画配置
<draggable
v-model="list"
tag="div"
v-bind="{
animation: 200,
group: 'description',
disabled: false,
ghostClass: 'ghost'
}">
# transition-group可以实现分组,可以不使用
<transition-group>
# 到这一层的容器都可以实现拖拽了
<el-card v-for="element in list" :key="element.id" class="box-card">
<div class="element">
<span>{
{element.name}}</span>
</div>
<div class="del-button">
<el-button icon="el-icon-close" circle size="mini" @click="delClass"></el-button>
</div>
</el-card>
</transition-group>
</draggable>
演示demo
左右拖动
把两个draggable设置为同一个group即可实现两个draggable之间相互拖动
<template>
<div>
<!--使用draggable组件-->
<div class="itxst">
<div style="padding-left:10px">add事件例子,左边往右边拖动试试看</div>
<div class="col">
<draggable v-model="arr1" group="itxst" @add="add1" animation="300">
<transition-group>
<div
:class="item.id==1?'item forbid':'item'"
v-for="item in arr1"
:key="item.id"
>{
{item.name}}</div>
</transition-group>
</draggable>
</div>
<div class="col">
<draggable v-model="arr2" group="itxst" @add="add2" animation="300">
<transition-group>
<div
:class="item.id==12?'item2 forbid':'item2'"
v-for="item in arr2"
:key="item.id"
>{
{item.name}}</div>
</transition-group>
</draggable>
</div>
</div>
</div>
</template>
<script>
//导入draggable组件
import draggable from "vuedraggable";
export default {
//注册draggable组件
components: {
draggable
},
data() {
return {
//定义要被拖拽对象的数组
arr1: [
{
id: 1, name: "www.itxst.com" },
{
id: 2, name: "www.jd.com" },
{
id: 3, name: "www.baidu.com" },
{
id: 5, name: "www.google.com" },
{
id: 4, name: "www.taobao.com" }
],
arr2: [{
id: 11, name: "常用菜单" }]
};
},
methods: {
//拖拽完成事件
add1(e) {
console.log(e);
},
add2(e) {
console.log(e);
}
}
};
</script>