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

Question

類似於這種效果透過滑鼠移動，拉取一個div框選中被div覆蓋的dom元素。大家有沒有什麼好的想法可以實現 我想出的方法是透過判斷div的offsetLeft,offsetTop和需要選中的各個元素的offsetLeft,offsetTop，如果dom元...

PHP中文网 · Answer

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

伊谢尔伦 · Answer

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

具體的方法是：

mousedown的時候計算出起始的列表項目index
2.( 起始的列表项的offsetTop + mouseup的offsetTop ) / 列表項高度，再把結果ceil一下，就獲取選中的個數了。
我們有了起始列表項目的index和選取的個數，那麼很容易計算出選取了哪些元素吧。

给我你的怀抱 · Answer

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

大家讲道理 · Answer

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

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

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

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

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