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

Baidu Netdisk を例に挙げると、各リスト項目の高さは固定されているため、マウスをドラッグしたときに形成される長方形とリスト要素全体の長方形の交点と量を比較するだけで済みます。計算量ははるかに小さくなります。

具体的な方法は次のとおりです:

1. マウスダウンのとき、開始リスト項目インデックス
   2.(起始的列表项のoffsetTop + マウスアップのoffsetTop) / リスト項目の高さを計算し、その結果をceilして選択された数値を取得します。

2. 開始リスト項目のインデックスと選択された項目の数があるため、どの要素が選択されているかを簡単に計算できます。

Answer 3

親コンテナの高さ、親コンテナのscrollTop/リスト項目の高さは固定、四角形の相対的な上部、四角形の高さ
これらの変数で十分です

Answer 4

リーリー

上記は完全なロジックです。自分でコードを書いてみてください。