類似于這種效果通過(guò)鼠標(biāo)移動(dòng)，拉取一個(gè)p框選中被p覆蓋的dom元素。
大家有沒(méi)有什么好的想法可以實(shí)現(xiàn)
我想出的方法是通過(guò)判斷p的offsetLeft,offsetTop和需要選中的各個(gè)元素的offsetLeft,offsetTop，如果dom元素小于p的offsetLeft+Top，就是就是被框選中的。
不過(guò)感覺(jué)不好的地方，每次輕微需要遍歷一次各個(gè)元素的offset屬性值，因?yàn)樵乇容^多，有幾百個(gè)，1獲取屬性值會(huì)引起大量回流，2每次判斷太多了。
所以想集思廣益，求助下大家有沒(méi)有更好的方法
之前找了張網(wǎng)盤的效果，想形象的表示，不過(guò)那個(gè)比較簡(jiǎn)單，真是場(chǎng)景稍微復(fù)雜點(diǎn)
4
0
0
要看你怎么考量的，我提供個(gè)簡(jiǎn)單的辦法，
在 mousemove 的時(shí)候， 獲取e.target保存起來(lái)，然后通過(guò)功能函數(shù)篩選出想要的，就這么簡(jiǎn)單
以百度網(wǎng)盤為例，我的想法是：因?yàn)槊總€(gè)列表項(xiàng)的高度是固定的，因此只需要對(duì)比鼠標(biāo)拖移的時(shí)候形成的矩形和整個(gè)列表元素的矩形相交情況，計(jì)算量會(huì)小很多。
具體的方法是：
mousedown的時(shí)候計(jì)算出起始的列表項(xiàng)index
2.( 起始的列表項(xiàng)的offsetTop + mouseup的offsetTop ) / 列表項(xiàng)高度，再把結(jié)果ceil一下，就獲取選中的個(gè)數(shù)了。
我們有了起始列表項(xiàng)的index和選中的個(gè)數(shù)，那么很容易計(jì)算出選中了哪些元素吧。
父容器高度, 父容器的scrollTop/列表項(xiàng)高度固定, 矩形的相對(duì)Top, 矩形高度
這幾個(gè)變量應(yīng)該夠了
按下標(biāo)記關(guān)閉;
按下點(diǎn)坐標(biāo) = {x: null; y: null};
抬起點(diǎn)坐標(biāo) = {x: null; y: null};
已選取元素?cái)?shù)組 = [];
document.onmousedown {
按下標(biāo)記開(kāi)啟
按下點(diǎn)坐標(biāo) = {x: 鼠標(biāo)當(dāng)前橫向偏移; y: 鼠標(biāo)當(dāng)前縱向偏移};
}
待選元素.onmouseover {
如果按下標(biāo)記開(kāi)啟，加入已選取元素?cái)?shù)組
}
document.onmouseup {
按下標(biāo)記關(guān)閉
清空已選取元素?cái)?shù)組
抬起點(diǎn)坐標(biāo) = {x: 鼠標(biāo)當(dāng)前橫向偏移; y: 鼠標(biāo)當(dāng)前縱向偏移};
}
利用已選取元素?cái)?shù)組操作已選中的元素
利用按下點(diǎn)坐標(biāo)、抬起點(diǎn)坐標(biāo)繪制框選層
