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()
}
},
};
拖拽同級(jí)元素顯示輔助線并自動(dòng)吸附
?著作權(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ù)。
【社區(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)容
- 最近看歡樂(lè)頌,很多人喜歡里面的樊勝美,覺(jué)得那是現(xiàn)實(shí)生活的自己,一方面覺(jué)得自己在為生活奔波忙碌的自己卻還口袋空空,在...
- 聚焦解決 生活中我們都習(xí)慣去找原因,原因找到了,可我問(wèn)題沒(méi)有解決,反而讓事情更糟糕。所以當(dāng)問(wèn)題來(lái)臨時(shí),我們只需要思...
- 馬老師經(jīng)常講,人生就是一場(chǎng)體驗(yàn),我想在陪伴孩子成長(zhǎng)的過(guò)程當(dāng)中,媽媽會(huì)有一份體驗(yàn),孩子也會(huì)有一份體驗(yàn),因?yàn)檫@是兩個(gè)不...
- 我在前面的文章里提到過(guò),租我房子那個(gè)好看的獨(dú)身姑娘,簽合同時(shí)我們見(jiàn)過(guò)一次,時(shí)間很短,她給我感覺(jué),性格活潑,因?yàn)槊?..
- 我想我是在五歲的時(shí)候便認(rèn)識(shí)她的!因?yàn)殛P(guān)于年少的事情,太多都遺忘,許多回憶只能靠一些碎片來(lái)拼湊! 她膚白聰明,樂(lè)觀愛(ài)...