javascript - Implémentez la souris pour dessiner un cadre div et obtenez l'élément dom couvert par le div

Question

Semblable à cet effet, déplacez la souris et tirez une case p pour sélectionner l'élément dom couvert par p.
Avez-vous de bonnes idées qui pourraient être mises en œuvre

---

La méthode que j'ai proposée consiste à juger le offsetLeft, offsetTop de p et le offsetLeft, offsetTop de chaque élément qui doit être sélectionné. Si l'élément dom est plus petit que le offsetLeft+Top de p, il est sélectionné par le cadre. .
Mais le problème est que vous devez parcourir la valeur d'attribut de décalage de chaque élément à chaque fois. Parce qu'il y a beaucoup d'éléments, il y en a des centaines 1. L'obtention de la valeur d'attribut provoquera beaucoup de reflux, 2. C'est trop. à juger à chaque fois.

---

Je veux donc réfléchir et demander si quelqu'un a une meilleure solution

---

J'ai déjà cherché l'effet d'un disque réseau et je voulais l'exprimer de manière vivante, mais celui-ci était relativement simple, et la scène était vraiment un peu plus compliquée

Answer 1

Cela dépend de la façon dont vous le considérez, je vous propose une méthode simple,
Lorsque vous déplacez la souris, récupérez e.target et enregistrez-le, puis filtrez ceux que vous souhaitez via la fonction function, c'est aussi simple que cela# 🎜🎜 #

Answer 2

Prenons Baidu Netdisk comme exemple. Mon idée est la suivante : comme la hauteur de chaque élément de la liste est fixe, il vous suffit de comparer l'intersection du rectangle formé lorsque la souris est déplacée avec le rectangle de l'élément de liste entier et le montant. de calcul sera beaucoup plus petit.

La méthode spécifique est la suivante :

Lorsque

1. mousedown, calculez l'index de l'élément de liste de départ
   2. (offsetTop of 起始的列表项 + offsetTop of mouseup) / hauteur de l'élément de liste, puis plafonnez le résultat pour obtenir le numéro sélectionné.

2. Nous avons l'index de l'élément de la liste de départ et le nombre d'éléments sélectionnés, il est donc facile de calculer quels éléments sont sélectionnés.

Answer 3

La hauteur du conteneur parent, la hauteur de l'élément scrollTop/list du conteneur parent est fixe, le haut relatif du rectangle et la hauteur du rectangle
Ces variables devraient suffire

Answer 4

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

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

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

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

Ce qui précède est la logique complète, veuillez essayer d'écrire le code vous-même !