javascript - 實作滑鼠劃出個div框，取得被div覆蓋的dom元素

Question

##類似於這種效果透過滑鼠移動，拉取一個p框選中被p覆蓋的dom元素。
大家有沒有什麼好的想法可以實現

---

我想出的方法是透過判斷p的offsetLeft,offsetTop和需要選取的各個元素的offsetLeft,offsetTop，如果dom元素小於p的offsetLeft Top，就是被框選中的。
不過感覺不好的地方，每次輕微需要遍歷一次各個元素的offset屬性值，因為元素比較多，有幾百個，1獲取屬性值會引起大量回流，2每次判斷太多了。

---

所以想集思廣益，求助大家有沒有更好的方法

---

之前找了張網盤的效果，想形象的表示，不過那個比較簡單，真是場景稍微複雜點

Answer 1

要看你怎麼考慮的，我提供個簡單的辦法，
在 mousemove 的時候， 獲取e.target保存起來，然後透過功能函數篩選出想要的，就這麼簡單

Answer 2

以百度網盤為例，我的想法是：因為每個列表項目的高度是固定的，因此只需要對比滑鼠拖移的時候形成的矩形和整個列表元素的矩形相交情況，計算量會小很多。

具體的方法是：

1. mousedown的時候計算出起始的列表項目index
   2.( 起始的列表项的offsetTop + mouseup的offsetTop ) / 列表項高度，再把結果ceil一下，就獲取選中的個數了。

2. 我們有了起始列表項目的index和選取的個數，那麼很容易計算出選取了哪些元素吧。

Answer 3

父容器高度, 父容器的scrollTop/列表項目高度固定, 矩形的相對Top, 矩形高度
這幾個變數應該夠了

Answer 4

按下标记关闭;
按下点坐标 = {x: null; y: null};
抬起点坐标 = {x: null; y: null};
已选取元素数组 = [];
document.onmousedown {
    按下标记开启
    按下点坐标 = {x: 鼠标当前横向偏移; y: 鼠标当前纵向偏移};
}

待选元素.onmouseover {
    如果按下标记开启，加入已选取元素数组
}

document.onmouseup {
    按下标记关闭
    清空已选取元素数组
    抬起点坐标 = {x: 鼠标当前横向偏移; y: 鼠标当前纵向偏移};
}

利用已选取元素数组操作已选中的元素
利用按下点坐标、抬起点坐标绘制框选层

以上是完整邏輯，程式碼你盡量自己寫！