首先：HTML中，關鍵點是監聽拖拽的三個階段，即：dragstart/dragover/dragend，注意：要拖拽元素必須加上draggable="true"

<ul @dragstart="onDragStart"
@dragover="onDragOver"
@dragend="onDragEnd"
ref="taskListUl">
<li v-for="(subTask,index) in subTaskList"
draggable="true"
:id="subTask.id"
:key="subTask.id">
<el-row>
<el-col :lg="20">
<div class="main">
<el-row>
<el-col :span="3"><el-checkbox></el-checkbox></el-col>
<el-col :span="21" class="taskEdit" v-if="show.isShowEdit !== index" :title="subTask.name">{{subTask.name}}</el-col>
<el-col :span="21" v-else>
<el-row style="width: 300px;">
<el-form ref="taskEditForm" :model="subTask">
<el-col :span="14">
<el-input v-model="subTask.name" size="mini"
@keyup.enter.native="saveSubTask('subTaskForm',subTask);showEditTitle()"></el-input>
</el-col>
<el-col :span="10">
<el-button type="primary" style="font-size:12px;color:#fff;margin-left:4px;padding:5px 8px;border:0;"
size="mini" @click="saveSubTask('subTaskForm',subTask);handleTaskEdit()">保存</el-button>
<el-button style="font-size:12px;padding:5px 8px;border:0;" size="mini" @click="handleTaskEdit">取消</el-button>
</el-col>
</el-form>
</el-row>
</el-col>
</el-row>
</div>
<div class="icon1" v-if="show.isShowEdit !== index">
<el-button circle size="mini" @click="handleTaskEdit(index)"><i class="el-icon-edit"></i></el-button>
<el-button circle size="mini" @click="handleTaskDelete(index,subTask.id)"><i class="el-icon-delete"></i></el-button>
</div>
<div class="icon2">
<el-button circle size="mini"><i class="el-icon-s-finance"></i></el-button>
<el-button circle size="mini"><i class="el-icon-user"></i></el-button>
</div>
</el-col>
</el-row>
</li>
</ul>
其次，JavaScript中
data() {
return {
　　subTaskList: [] 　　}
},
methods: { onDragStart(event){ //用于在拖拽開始時獲取被拖拽元素
console.log("drag start")
this.draging=event.target;
console.log(this.draging);
},
onDragOver(event){ //用于在拖拽過程中，獲取拖拽元素經過的對象，以及對元素順序做出調整
console.log('drag move');
this.target=event.path[5]; //li的位置
let targetTop=event.target.getBoundingClientRect().top;
let dragingTop=this.draging.getBoundingClientRect().top;
if (this.target.nodeName === "LI"&&this.target !== this.draging) {
if (this.target) {
if (this.target.animated) {
return;
}
}
if(this._index(this.draging)<this._index(this.target)){
this.target.parentNode.insertBefore(this.draging,this.target.nextSibling);
}else{
this.target.parentNode.insertBefore(this.draging, this.target);
}
this._anim(targetTop,this.target);
this._anim(dragingTop,this.draging);
}
},
_anim(startPos,dom) { //用于重繪元素
let offset = startPos - dom.getBoundingClientRect().top;
dom.style.transition = "none";
dom.style.transform = `translateY(${offset}px)`;
//觸發重繪
dom.offsetWidth;
dom.style.transition="transform .3s";
dom.style.transform=``;
clearTimeout(dom.animated);
dom.animated=setTimeout(()=>{
dom.style.transition="";
dom.style.transform=``;
dom.animated=false;
},300)
},
onDragEnd(event){ //結束后跟俊最終拖拽調整subTaskList數組
console.log('drag end');
//獲取排序后的li節點數組
let currentNodes=Array.from(this.$refs.taskListUl.childNodes);
let newArr = [];
for(let i=0;i<currentNodes.length;i++) {
for(let j=0;j<this.subTaskList.length;j++) {
if(currentNodes[i].id == this.subTaskList[j].id){
newArr[i] = this.subTaskList[j];
}
}
}
this.subTaskList = newArr;
console.log(this.subTaskList);
},

_index(el){ //用于根據元素id來獲取對應元素的索引值 let domData=Array.from(this.$refs.taskListUl.childNodes);
return domData.findIndex((currentValue,index,arr)=>{
return el.id == currentValue.id;
});
},
}

轉載于:https://www.cnblogs.com/yccg990118/p/11212338.html

總結

以上是生活随笔為你收集整理的Vue的v-for中列表项拖拽排序详细方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。