vue项目中使用js原生api实现拖拽排序

效果

属性

 draggable，作为h5新增的属性，它能够给与一切的html元素拖动的效果。

事件

触发对象	事件名称	说明
源对象	dragstart	在用户开始拖动元素或被选择的文本时调用
	drag	用户拖动元素或选择的文本时，每隔几百毫秒就会被触发一次
	dragend	在拖放操作结束时触发
目标对象	dragenter	源对象开始进入目标对象范围内触发 使用 pereventDefault 来阻止浏览器默认的拒绝拖拽
	dragover	源对象在目标对象范围内移动时触发 使用 pereventDefault 来阻止浏览器默认的拒绝拖拽
	dragleave	源对象离开目标对象范围时触发
	drop	源对象在目标对象范围内被释放时触发

 代码

 <template id="bootOrder">
    <div class="drag-group" >
        <div class="drag-item"
        v-for="(item,idx ) in list"
        draggable="true" 
        @dragstart="dragStart(idx)" 
        @dragenter="dragEnter($event,idx)"
        @dragover="dragOver($event, idx)" :key="idx">
            <div class="drag-content" >
                <i>{{idx+1}}</i>
                <span >{{item.text}} </span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
data() {
return {
   
    list:[{
            val:0,text:"lable1"
        },{
            val:1,text:"lable2"
        },{
            val:4,text:"lable3"
        },{
            val:7,text:"lable4"
        },],
    
    // 源对象的下标
      dragIndex: '',
      // 目标对象的下标
      enterIndex: '',
      timeout:null,
}
},
destroyed() {
   // 每次离开当前界面时，清除定时器
    clearInterval(this.timeout)
    this.timeout = null
  },
methods: {

    dragStart(index) {
      console.log('origin index ===>>> ',index)
      this.dragIndex = index
    },

    // dragenter 和 dragover 事件的默认行为是拒绝接受任何被拖放的元素。 
    // 因此，我们要在这两个拖放事件中使用`preventDefault`来阻止浏览器的默认行为
    dragEnter(e,index) {  
      e.preventDefault();
       
    },
    dragOver(e, index) {
      e.preventDefault();
      console.log('target index ===>>> ',index)
      this.enterIndex = index
      if( this.timeout !== null) {
        clearTimeout(this.timeout)
      }
      // 拖拽事件的防抖
      this.timeout = setTimeout(() => {
         if( this.dragIndex !== index){
            const source = this.list[this.dragIndex]
            this.list.splice(this.dragIndex,1)
            this.list.splice(index, 0 , source )
            // 排序变化后目标对象的索引变成源对象的索引
            this.dragIndex = index;
          }
      }, 500);    
    }
}
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */

.drag-group{
   
    font-size: 15px;
    line-height: 33px;
    font-weight: 500;
    i{
        font-style: normal !important;
    }
    .drag-item{
        margin-bottom: 10px;
        .drag-content{
            span{
                display: inline-block;
                width: 200px;
                height: 34px;
                border: 1px solid #b3b3b3;
                border-radius: 1px;
                color: #161616;
                box-sizing: border-box;
                padding-left: 0.5rem;
                padding-right: 7px;
                margin-left: 7px;
            }
        }
    }

}
</style>