原生js实现左右页签拖拽draggable=true

背景介绍

如下图，实现这样的页签拖拽效果 

1、首先定义拖拽div,给每一个要拖拽的元素加draggable=true

<ul class="tab-ccl-list">
   <li
        draggable="true"
        :data-title="tab.value"
        v-for="(tab, index) in headerTabs"
        :key="index" 
        :class="{'active': tab.value == tabcheck}"
         @click="tabcheckFun(tab.value)">
        <span>{{tab.label}}</span>
      </li>
    </ul>

2、 给拖拽区域div绑定事件

getDragEvent(){
      let list=document.queryselector(".tab-test-list")
      //currentItem存放将要拖动的元素
      let currentItem;
      list.ondragover =e =>{
        e.preventDefault()
      }
        // 拖动开始
      list.ondragstart=e=>{// 延迟被拖动的原始元素样式
        setTimeout(()=>{
          e.target.classList.add('moving')
        },0)
        // 存储被拖动元素
        currentItem=e.target
        //拖动时默认行为是复制，此处改为移动
        e.dataTransfer.effectAllowed='move'
      }

      // 拖动中
      list.ondragenter= e =>{
        e.preventDefault()
        if(e.target == currentItem||e.target == list)return
        // 1ist.children获取的是类数组
        let itemList=Array.from(list.children);
        //获取当前拖动元素位置的下标
        let curItemIndex=itemList.indexOf(currentItem)
        //当前拖动元素所移动到的位置的元素的下标
        let targetIndex= itemList.indexOf(e.target)
        if(curItemIndex<targetIndex){
          list.insertBefore(currentItem,e.target.nextElementsibling)
        }else{
          list.insertBefore(currentItem,e.target)
        }
      }
      // 拖动结束
      list.ondragend = e =>{
        //结束移除移动样式
        e.target.classList.remove('moving')
        let listArr=Array.from(list.children);
        let tabArr=[]
        tabArr=listArr.map(item=>item.attributes[1].value)
        this.reqSave(tabArr)//保存页签顺序位置
      }

    }