<template>
<el-table :data="list">
<el-table-column prop="name" label="名称" />
<el-table-column prop="url" label="链接" />
<el-table-column prop="description" label="描述" />
</el-table>
</template>
<script>
export default ({
data(){
return{
list:[],
}
},
methods:{
// 获取数据列表
getlist(){
this.list = [
{name:'百度',url:'wwww.baidu.com',description:'baidu'},
{name:'腾讯网',url:'wwww.qq.com',description:'tencent'},
{name:'新浪微博',url:'https://www.weibo.com/',description:'weibo'},
{name:'今日头条',url:'https://www.toutiao.com/',description:'bytedance'},
{name:'哔哩哔哩',url:'https://www.bilibili.com/',description:'bilibili'}
]
},
// 行拖拽
rowDrop() {
const _this = this
// 目标元素
let target = document.querySelector('.el-table__body-wrapper tbody');
console.log("target.childElementCount",target.childElementCount)
for (let i = 0; i < target.childElementCount; i++) {
const child = target.children[i]
child.draggable = true
child.ondragstart = function(event) {
console.log("start111111", i);
event.dataTransfer.setData('index', i);
}
child.ondragover = function(event){
event.preventDefault()
}
child.ondrop = function(event) {
event.preventDefault();
event.stopPropagation()
let startIndex = parseInt(event.dataTransfer.getData('index'))
let currentIndex = parseInt(i)
console.log("start", startIndex)
console.log("drop", currentIndex)
if (startIndex - currentIndex > 0) {
console.log("要拖拽的元素的索引 大于 当前位置的元素的索引")
_this.list.splice(currentIndex, 0, _this.list[startIndex])
console.log("删除" + startIndex + 1)
_this.list.splice(startIndex + 1, 1)
_this.is_table_sort++
} else if (startIndex - currentIndex < 0) {
console.log("要拖拽的元素的索引 小于 当前位置的元素的索引")
_this.list.splice(currentIndex + 1, 0, _this.list[startIndex])
_this.list.splice(startIndex, 1)
_this.is_table_sort++
} else {
console.log("什么也不用做");
}
}
child.ondragend = function() {
console.log('child' + i + '拖拽结束');
// _this.rowDrop()
}
}
},
},
updated(){
//如果是通过ajax加载的数据需要用该方法
/*
this.$nextTick(()=>{
this.rowDrop()
})
*/
},
mounted: function () {
//如果不是通过ajax加载的数据需要用该方法
this.$nextTick(()=>{
this.rowDrop()
})
},
created(){
this.getlist()
},
})
</script>
