概述

1 .双栏穿梭选择框，常用于将多个项目从一边移动到另一边
2 .其实就是一个更加概括的流程图，必须要支持可拖拽
3 .通过拖拽实现一个流程，比如自己工作的完成部分
4 .注意是要实现一下拖拽的相关事件

如何实现组内元素的拖拽排列

1 .组内从一个向另一个组内的末尾添加-ok
2 .组内从一个向另一个组内的中间添加-ok
3 .组内进行拖拽排序,js移动数组的位置,算法这里还是有点问题，尤其是各种花式操作数组的操作

1 .交换任意两个元素的位置
2 .数组中的一个元素移动到另一个位置

代码

<template>
    <div class="drag">
        <div 
            v-for="(n,index) in showData"
                @dragover.prevent="handleDragOver"
                @drop="handleDrop($event,index)"
            class="d">
            <div 
                v-for="(n1,index1) in n"
                @dragstart="handleDragStart($event,index,index1)" 
                @dragend="handleDragEnd($event,index,index1)"
                
                @dragover.prevent="handleDragOver"
                @drop="handleSonDrop($event,index1)"
                //这里是关键，可以在两个地方上面加这个事件
                
                draggable
                class="d1">
                {{n1}}
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data:function(){
        return {
            x1:null,
            y1:null,
            // 拖放元素的坐标，用于删除这个元素
            dragData:null,
            x:null,
            // 放置元素在的第一层索引
            y:null,
            // 防止元素在第二层的索引

            showData:[[1,2,3,4,5],[6,7,8,9],[],[],[]],
            isOne:true,
        }
    },
    methods:{
        //在拖拽目标上触发的事件

        handleDragStart(e,x,y){
            this.dragData=this.showData[x][y]
            this.x1=x
            this.y1=y
            
            // 不能在这个时候删掉，会出现bug

            // 设置当前拖拽的元素。或者数据
            // 还需要知道是在哪一个div里面
        },
        // 用户开始拖动元素时触发
        
        handleDragEnd(e,c){
            console.log('放开拖拽物品，清除拖拽的标记')
           
        },
        // 用户完成元素拖拽元素后触发
        handleDrag(e){

        },
        // 用户正在拖放时触发


        handleDrop(e,index){
            console.log('父先')
            let _self=this

            this.x=index
            // 如果是在本div内进行的话，就要先删除元素，然后在添加，不然删除的是之后的元素，顺序会乱
            if(this.x==this.x1){
                console.log('1111111111')

                if(this.y==null){
                    // 最后一个拖拽了,不做处理，直接清空数据
                     this.dragData=null
                     // 添加成功，删除原来的元素
                     this.x=null
                     this.x1=null
                     this.y=null
                     this.y1=null
                     return         
                }
                let distance;
                let count;
                if(this.y1-this.y>0){
                    distance=0
                    count=this.y1-this.y
                }else{
                    distance=1
                    count=this.y-this.y1
                }
                console.log(this.showData[this.x])
                console.log(this.y1)
                console.log(this.y)
                this.showData.splice(_self.x,1,_self.super_swap(_self.showData[_self.x],_self.y1,count,distance))
                console.log(this.showData[this.x])

                this.dragData=null
                // 添加成功，删除原来的元素
                this.x=null
                this.x1=null
                this.y=null
                this.y1=null
                return              
            }
            

            // 正常情况是子先/然后父，这样就可以确定当触发这个函数的时候，this.y的值是一定有的
            if(this.y!=null&&this.x!=null){
                console.log('2222222222')
                this.showData[index].splice(this.y,0,this.dragData)
            }

            if(this.y==null&&this.x!=null){
                console.log('3333333333')
                this.showData[index].push(this.dragData)
            }
            // let changeData=this.showData[this.x].splice(this.y,1)[0]
            // 

            this.dragData=null
             // 添加成功，删除原来的元素
            this.showData[this.x1].splice(this.y1,1)

        },
        // 在一个拖动过程种，释放鼠标时触发此事件
        handleDragEnter(){
            console.log('enter')
            
        },
        // 鼠标拖动的对象进入其容器范围
        handleDragleave(){

        },
        // 鼠标拖动的对象离开其容器范围
        handleDragOver(){
            
        },
        handleSonDrop(e,index){
            this.y=index
            console.log('子先,如果有跨div触发的时候，一定是先触发这个')
        },
        // 被鼠标拖动的兑现挂在另一容器范围拖动时触发这个事件
        swapItem(arr,old_index,new_index){
            [arr[old_index],arr[new_index]]=[arr[new_index],arr[old_index]]
            return arr
        },
        // 向下移动几次,
        super_swap(arr,index,count,isUp){
            // arr:需要操作的数组
            // index:需要操作的数组的元素的索引
            // 操作元素移动的次数
            // 操作元素移动的方向
            let re=arr
            if(isUp==1){
                console.log('1111')
                // 向下移动,还需要判断下向下有没有溢出
                for(let x=0;x<count;x++){
                    re=this.swapItem(re,index+x,index+x+1)               
                }
                return re;

            }else if(isUp==0){
                // 向上移动，判断下向上有没有溢出
                console.log('2222')
                for(let x=0;x<count;x++){
                    re=this.swapItem(re,index-x,index-x-1)                
                }
                return re;
            }
        }       
    }
}
</script>

<style lang="less" src="./index.less">

</style>