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: 鼠标当前纵向偏移};
}

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

以上是完整逻辑，代码你尽量自己写！