この効果と同様に、マウスを移動(dòng)して p ボックスを引いて、p で覆われた dom 要素を選択します。
実裝できそうな良いアイデアはありますか
私が考えた方法は、p の offsetLeft、offsetTop と、選択する必要がある各要素の offsetLeft、offsetTop を判斷し、dom 要素が p の offsetLeft Top より小さい場(chǎng)合、それが選択されるというものです。フレーム。
しかし、悪い點(diǎn)は、各要素の offset 屬性値を毎回トラバースする必要があることです。要素が多いため、何百もの數(shù)があります。1. 屬性値の取得により大量のバックフローが発生します。2.毎回判斷するには多すぎる。
それではブレインストーミングをして、より良い方法があれば助けを求めたいと思います
以前、ネットワーク ディスクのエフェクトを探して、それを鮮やかに表現(xiàn)したかったのですが、あれは比較的単純で、実際のシーンはもう少し複雑でした。
4
0
0
それは考え方次第です。
mousemove時(shí)にe.targetを取得して保存し、関數(shù)関數(shù)を通して必要なものをフィルタリングするだけです。
Baidu Netdisk を例に挙げると、各リスト項(xiàng)目の高さは固定されているため、マウスをドラッグしたときに形成される長(zhǎng)方形とリスト要素全體の長(zhǎng)方形の交點(diǎn)と量を比較するだけで済みます。計(jì)算量ははるかに小さくなります。
具體的な方法は次のとおりです:
マウスダウンのとき、開始リスト項(xiàng)目インデックス
2.(起始的列表項(xiàng)のoffsetTop + マウスアップのoffsetTop) / リスト項(xiàng)目の高さを計(jì)算し、その結(jié)果をceilして選択された數(shù)値を取得します。
開始リスト項(xiàng)目のインデックスと選択された項(xiàng)目の數(shù)があるため、どの要素が選択されているかを簡(jiǎn)単に計(jì)算できます。
親コンテナの高さ、親コンテナのscrollTop/リスト項(xiàng)目の高さは固定、四角形の相対的な上部、四角形の高さ
これらの変數(shù)で十分です
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
