Vue的v-for中列表项拖拽排序详细方法

首先：HTML中，关键点是监听拖拽的三个阶段，即：dragstart/dragover/dragend，注意：要拖拽元素必须加上draggable="true"

    @dragover="onDragOver"
    @dragend="onDragEnd"
    ref="taskListUl">
  
      draggable="true"
      :id="subTask.id"
      :key="subTask.id">
    
      
        

          
            
            {
    {subTask.name}}
            
              
                
                  
                                                  @keyup.enter.native="saveSubTask('subTaskForm',subTask);showEditTitle()">
                  
                  
                                                   size="mini" @click="saveSubTask('subTaskForm',subTask);handleTaskEdit()">保存
                    取消
                  
                
              
            
          
        
        

          
          
        
        

          
          
        
      
    
  

其次，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.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    for(let j=0;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