列表拖动-城地-街道演练-模板方案

文件位置walkthroughScenarios.vue  
<div class="draggableList">      <div draggable="true">      <div />    <div />
let list
function dragFn(){
    list = null
    list = document.querySelectorAll('.draggableList')
      list.forEach((list,index)=>{
        list && list.removeEventListener('dragstart',dragstartFn)
        list && list.removeEventListener('dragenter',dragenterFn)
        list && list.removeEventListener('dragover',(e)=>{
            e.preventDefault()
        })
        list && list.removeEventListener('dragend',(e)=>{
            currentLi && currentLi.classList.remove('moving')
        })
        let currentLi
        list && list.addEventListener('dragstart',dragstartFn)
        function dragstartFn(e){
            e.dataTransfer.effectAllowed = 'move'
            currentLi = e.target
            setTimeout(()=>{
                currentLi.classList.add('moving')
            })
        }
        list && list.addEventListener('dragenter',dragenterFn)
        function dragenterFn(e){
            e.stopImmediatePropagation() // e.prentDefault()解决：事件监听器 addEventListener 被多次调用
            if(e.target === currentLi||e.target === list){
                return
            }
            let liArray = Array.from(list.childNodes)
            let currentIndex = liArray.indexOf(currentLi)
            let targetindex = liArray.indexOf(e.target)
            if(currentIndex<targetindex){
                // list.insertBefore(currentLi,e.target.nextElementSibling)
                handleThreeDetail(currentIndex,targetindex,index)
            }else{
                // list.insertBefore(currentLi,e.target)
                handleThreeDetail(currentIndex,targetindex,index)
            }
        }
        list &&  list.addEventListener('dragover',(e)=>{
            e.preventDefault()
        })
        list &&  list.addEventListener('dragend',(e)=>{
            currentLi && currentLi.classList.remove('moving')
        })
    })}
// 拖拽后->数据驱动更新 
function handleThreeDetail (currentIndex,targetindex,jdIndex){
    if(currentIndex<1||targetindex<1||dialogPorps.type == '2') return
    // setTimeout(()=>{
        let activityFlowTasks = {}
        let jdFlowTasks = staffForm.templateThreeDetail[jdIndex]['activityFlowTasks']
        activityFlowTasks = JSON.parse(JSON.stringify(jdFlowTasks[currentIndex-1]))
        jdFlowTasks[currentIndex-1] = {...JSON.parse(JSON.stringify(jdFlowTasks[targetindex-1])),taskIndex:jdFlowTasks[currentIndex-1]?.taskIndex}
        jdFlowTasks[targetindex-1] = {...activityFlowTasks,taskIndex:jdFlowTasks[targetindex-1]?.taskIndex,}
        staffForm.templateThreeDetail.forEach(item=>{
            item.activityFlowTasks.forEach((item1,index1)=>{
                if(index1==0){
                    item1.taskFromtime = item.flowFromtime
                    taskFromtimeChange(item1,index1,item,true)
                }else{
                    item1.taskFromtime = item.activityFlowTasks[index1-1].taskTotime
                    taskFromtimeChange(item1,index1,item,true)
                }
            })
        })
    // })
}

.draggableList .moving{     background: transparent;     color: transparent;     border: 1px dashed #ccc;}