javascript – Implementieren Sie die Maus, um einen Div-Rahmen zu zeichnen und das vom Div abgedeckte Dom-Element abzurufen

Question

Ähnlich wie bei diesem Effekt bewegen Sie die Maus und ziehen ein p-Feld, um das von p abgedeckte dom-Element auszuwählen.
Haben Sie gute Ideen, die sich umsetzen lassen

---

Die Methode, die ich mir ausgedacht habe, besteht darin, den OffsetLeft, OffsetTop von p und den OffsetLeft, OffsetTop jedes Elements zu beurteilen, das ausgewählt werden muss. Wenn das Dom-Element kleiner als OffsetLeft+Top von P ist, wird es vom Rahmen ausgewählt .
Aber das Schlimme ist, dass Sie jedes Mal den Offset-Attributwert jedes Elements durchlaufen müssen. Da es viele Elemente gibt, gibt es Hunderte. 1. Das Abrufen des Attributwerts führt zu viel Rückfluss. 2. Es ist zu viel jedes Mal zu beurteilen.

---

Also möchte ich ein Brainstorming durchführen und fragen, ob jemand einen besseren Weg hat

---

Ich habe zuvor nach dem Effekt einer Netzwerkfestplatte gesucht und wollte ihn anschaulich ausdrücken, aber dieser war relativ einfach und die Szene war wirklich etwas komplizierter

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

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

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