效果演示:
拖拽演示
话不多说 直接上源码 (代码为测试用代码 存在没有优化的地方)
<template>
<div>
<el-table
:data="receiveList"
style="width: 100%; margin: 10px 0px"
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
>
<el-table-column
label="当前人员"
prop="curName"
>
<template slot-scope="{row}">
<span
class="sp"
v-for="(item) in row.curName"
:key="item.id"
@mousedown.prevent="curToBy(item,row.wId)"
@mouseup="(curAdd(row.wId))"
>
{{ item.name }}
</span>
<span
class="sp"
v-if="!row.curName.length"
@mouseup="(curAdd(row.wId))"
></span>
</template>
</el-table-column>
<el-table-column
label="备用人员"
prop="byName"
>
<template slot-scope="{row}">
<span
class="sp"
v-for="item in row.byName"
:key="item.id"
@mouseup="(byAdd(row.wId))"
@mousedown.prevent="byToCur(item,row.wId)"
>
{{ item.name }}
</span>
</template>
</el-table-column>
</el-table>
<div
class="mouse movem"
ref="mouse"
style="width: 30px; height: 30px; "
>{{mouseText}}</div>
</div>
</template>
<script>
export default{
data () {
return {
receiveList: [ // 表数据
{
wId: 1,
curName: [
{
id: 1,
name: 'a'
}
],
byName: [
{
id: 2,
name: 'b'
},
{
id: 3,
name: 'c'
},
{
id: 4,
name: 'd'
},
]
},
{
wId: 2,
curName: [
{
id: 1,
name: 'a'
}
],
byName: [
{
id: 2,
name: 'b'
},
{
id: 3,
name: 'c'
},
{
id: 4,
name: 'd'
},
]
},
],
curId: '', // 当前拖拽数据的id
mouseText: '', // 移动dom中的内容
hangId: '', // 当前表格行数据的id
direction: true, // 拖拽顺序
};
},
mounted () {
window.onmouseup = () => {
const lenght = this.receiveList[this.hangId].byName.length
const left = document.querySelectorAll('.el-table__row')[this.hangId].children[1].children[0].children[0].getBoundingClientRect().left
const right = document.querySelectorAll('.el-table__row')[this.hangId].children[1].children[0].children[lenght - 1].getBoundingClientRect().right
const top = document.querySelectorAll('.el-table__row')[this.hangId].children[1].children[0].children[0].getBoundingClientRect().top
const bottom = document.querySelectorAll('.el-table__row')[this.hangId].children[1].children[0].children[0].getBoundingClientRect().bottom
const leftTwo = document.querySelectorAll('.el-table__row')[this.hangId].children[0].children[0].children[0].getBoundingClientRect().left
const rightTwo = document.querySelectorAll('.el-table__row')[this.hangId].children[0].children[0].children[0].getBoundingClientRect().right
const topTwo = document.querySelectorAll('.el-table__row')[this.hangId].children[0].children[0].children[0].getBoundingClientRect().top
const bottomTwo = document.querySelectorAll('.el-table__row')[this.hangId].children[0].children[0].children[0].getBoundingClientRect().bottom
const ev = event || window.event;
if (this.direction) {
if (ev.pageX < left || ev.pageX > right || ev.pageY < top || ev.pageY > bottom) { // 判断鼠标抬起时 是否在目标dom范围内
this.receiveList[this.hangId].curName.push({
id: this.curId,
name: this.mouseText
})
this.mouseText = ''
window.removeEventListener('mousemove', this.mvFn)
return
}
} else {
if (ev.pageX < leftTwo || ev.pageX > rightTwo || ev.pageY < topTwo || ev.pageY > bottomTwo) { // // 判断鼠标抬起时 是否在目标dom范围内
this.receiveList[this.hangId].byName.push({
id: this.curId,
name: this.mouseText
})
this.mouseText = ''
window.removeEventListener('mousemove', this.mvFn)
return
}
}
this.mouseText = ''
window.removeEventListener('mousemove', this.mvFn)
}
},
methods: {
mvFn () {
// 获取Dom元素位置
const ev = event || window.event;
// 设置Dom元素的位置 (使用时需要加上单位px)
this.$refs.mouse.style.left = ev.pageX + 15 + 'px'
this.$refs.mouse.style.top = ev.pageY + 'px'
},
curToBy (item, id) { // 当前 到 备用
this.direction = true
setTimeout(() => { // 处理移动dom所在位置因素的影响
this.mouseText = item.name
}, 200)
this.curId = item.id
let index = this.receiveList.findIndex((value) => value.wId == id);
this.hangId = index
this.receiveList[index].curName.splice(0, 1)
window.addEventListener('mousemove', this.mvFn)
},
byAdd (id) { // 当前 新增
let index = this.receiveList.findIndex((value) => value.wId == id);
if (index !== this.hangId) return // 判断是否为同一行数据
this.receiveList[index].byName.push({
id: this.curId,
name: this.mouseText
})
},
byToCur (item, id) { // 备用 到 当前
this.direction = false
setTimeout(() => { // 处理移动dom所在位置因素的影响
this.mouseText = item.name
}, 200)
this.curId = item.id
let index = this.receiveList.findIndex((value) => value.wId == id);
let byIndex = this.receiveList[index].byName.findIndex((value) => value.id == item.id)
this.hangId = index
this.receiveList[index].byName.splice(byIndex, 1)
window.addEventListener('mousemove', this.mvFn)
},
curAdd (id) { // 备用 新增
let index = this.receiveList.findIndex((value) => value.wId == id);
if (index !== this.hangId) return // 判断是否为同一行数据
if (this.receiveList[index].curName.length >= 1) { // 判断当前数据长度
this.receiveList[this.hangId].byName.push({
id: this.curId,
name: this.mouseText
})
return
}
this.receiveList[index].curName.push({
id: this.curId,
name: this.mouseText
})
},
},
};
</script>
<style lang="scss">
.sp {
display: inline-block;
width: 20px !important;
height: 20px !important;
}
.movem {
position: absolute;
}
</style>