拖拽同级元素显示辅助线并自动吸附

export default {
    data(){
        return{
            x_forLine:[],//存该元素下所有的x，x_center,x+w 的位置
            y_forLine:[],//存该元素下所有的y，y_center,y+h 的位置
        }
    },
    methods: {
        //mousedown事件模拟drag拖拽
        subDragchange(e,index,i){
            let target = e.target
            let disX = e.clientX - target.offsetLeft//鼠标位置
            let disY = e.clientY - target.offsetTop
            let t = this.main[index].children[i].t
            let l = this.main[index].children[i].l
            this.main.index = index;//this.main 项目对象存放
            for(let j = 0 ; j < this.main.length ; j++){
                if(this.main[j].type === 'divbox'){//限制拖动的区域为自由容器
                  for(let k = 0 ; k < this.main[j].children.length ; k++){
                    let h = this.main[j].children[k].sty.h
                    let w = this.main[j].children[k].sty.w
                    if(j == index && k == i)//被拖拽的元素本身不做处理
                    continue
                    else{
                        if(j == index){//同级别其他元素
                            this.y_forLine.push(this.main[j].children[k].t,this.main[j].children[k].t + h / 2,this.main[j].children[k].t + h);
                            //存放y坐标轴
                        }
                      this.x_forLine.push(this.main[j].children[k].l,this.main[j].children[k].l + w / 2,this.main[j].children[k].l + w)
                      //存放x坐标轴
                    }
                  }
                }
              }
            console.log(101999,this.x_forLine)
            document.onmousemove = (e) =>{
                let left = l + e.clientX - disX
                let top = t + e.clientY - disY
                this.positionX = left
                this.positionY = top
                let h = this.main[index].children[i].sty.h
                let w = this.main[index].children[i].sty.w
                this.main[index].children[i].l = left
                this.main[index].children[i].t = top
                for(let j = 0 ; j < this.x_forLine.length ; j++){//循环x所有的元素坐标 
                    if(left >= this.x_forLine[j] - 4 && left <= this.x_forLine[j] + 4){ //left三点位置+-4px内控制显示
                        this.main[index].children[i].l = this.x_forLine[j] 
                        this.main.line_left_l = this.x_forLine[j]
                        this.main.line_left = true
                    }
                    else if(left + w / 2 >= this.x_forLine[j] - 4 && left + w / 2 <= this.x_forLine[j] + 4){
                        this.main[index].children[i].l  = this.x_forLine[j] - w / 2
                        this.main.line_center_x_l  = this.x_forLine[j]
                        this.main.line_center_x = true
                    }
                    else if(left + w >= this.x_forLine[j] - 4 && left + w <= this.x_forLine[j] + 4){
                        this.main[index].children[i].l  = this.x_forLine[j] - w
                        this.main.line_right_l  = this.x_forLine[j]
                        this.main.line_right = true
                    }
                }
                for(let j = 0 ; j < this.y_forLine.length ; j++){//y+-4px内控制显示
                    if(top >= this.y_forLine[j] - 4 && top <= this.y_forLine[j] + 4){
                        this.main[index].children[i].t = this.y_forLine[j]
                        this.main.line_top_t = this.y_forLine[j]
                        this.main.line_top = true
                    }
                    else if(top + h / 2 >= this.y_forLine[j] - 4 && top + h / 2 <= this.y_forLine[j] + 4){
                        this.main[index].children[i].t  = this.y_forLine[j] - h / 2
                        this.main.line_center_y_t  = this.y_forLine[j]
                        this.main.line_center_y = true
                    }
                    else if(top + h >= this.y_forLine[j] - 4 && top + h <= this.y_forLine[j] + 4){
                        this.main[index].children[i].t  = this.y_forLine[j] - h
                        this.main.line_bottom_t  = this.y_forLine[j]
                        this.main.line_bottom = true
                    }
                }
            }
            document.onmouseup = (e) =>{//拖拽结束清空数据
                document.onmousemove = null
                document.onmouseup = null
                this.x_forLine = []
                this.y_forLine = []
                this.main.line_left = false
                this.main.line_center_x = false
                this.main.line_right = false
                this.main.line_top = false
                this.main.line_center_y = false
                this.main.line_bottom = false
            }
            this.storeCommit()
        }
    },
};