vue多个表格之间的拖拽功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
<style>
.List-move {
transition: transform 1s;
}
* {
box-sizing: border-box;
}
.drag-list {
margin: 0 auto;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #20a0ff;
background-color: #bfa;
}
.box1 {
height: 300px;
width: 300px;
overflow: auto;
float: left;
border: 1px solid #000;
}
.box2 {
height: 300px;
float: left;
margin-left: 30px;
border: 1px solid #000;
width: 300px;
}
</style>
</head>
<body>
<div id="app">
<div class="drag-wrap">
<div class="box1">
<transition-group name="List">
<div class="drag-list" v-for="item in List" :key="item.id" draggable="true" @dragstart="dragstart(item)"
@dragenter="dragenter(item)" @dragend="dragend(item)">{{item.title}}</div>
</transition-group>
</div>
<div class="box2">
<transition-group name="List">
<div class="drag-list" v-for="item in list" :key="item.id" draggable="true" @dragstart="dragstart(item)"
@dragenter="dragenter(item)" @dragend="dragend(item)">{{item.title}}</div>
</transition-group>
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data() {
return {
List: [{
id: 1,
title: "这里是列表1的标题"
},
{
id: 2,
title: "这里是列表2的标题"
},
{
id: 3,
title: "这里是列表3的标题"
},
{
id: 4,
title: "这里是列表4的标题"
},
{
id: 5,
title: "这里是列表5的标题"
},
{
id: 6,
title: "这里是列表6的标题"
},
{
id: 7,
title: "这里是列表7的标题"
}
],
list: [{
id: 8,
title: "这里是列表8的标题"
}, {
id: 9,
title: "这里是列表9的标题"
}],
oldItem: '',
newItem: '',
}
},
methods: {
dragstart(item) {
this.oldItem = item;
},
dragenter(item) {
this.newItem = item;
},
dragend(item) {
if (this.oldItem != this.newItem) {
let oldIndex = this.List.indexOf(this.oldItem);
let newIndex = this.List.indexOf(this.newItem);
let oldflag = false
let newflag = false
if (oldIndex === -1) {
oldflag = true
oldIndex = this.list.indexOf(this.oldItem);
}
if (newIndex === -1) {
newflag = true
newIndex = this.list.indexOf(this.newItem);
}
let newList = [...this.List];
let newlist = [...this.list];
if (!oldflag) {
newList.splice(oldIndex, 1);
} else {
newlist.splice(oldIndex, 1);
}
if (!newflag) {
newList.splice(newIndex, 0, this.oldItem);
} else {
newlist.splice(newIndex, 0, this.oldItem);
}
this.List = [...newList];
this.list = [...newlist];
}
}
}
})
</script>
</body>
</html>