拖拽同級(jí)元素顯示輔助線并自動(dòng)吸附


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//鼠標(biāo)位置
            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 項(xiàng)目對(duì)象存放
            for(let j = 0 ; j < this.main.length ; j++){
                if(this.main[j].type === 'divbox'){//限制拖動(dòng)的區(qū)域?yàn)樽杂扇萜?                  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){//同級(jí)別其他元素
                            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坐標(biāo)軸
                        }
                      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坐標(biāo)軸
                    }
                  }
                }
              }
            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++){//循環(huán)x所有的元素坐標(biāo) 
                    if(left >= this.x_forLine[j] - 4 && left <= this.x_forLine[j] + 4){ //left三點(diǎn)位置+-4px內(nèi)控制顯示
                        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內(nèi)控制顯示
                    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) =>{//拖拽結(jié)束清空數(shù)據(jù)
                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()
        }
    },
};
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容