原生JS通过鼠标选择区域实现选中对应元素

小壮哥哥

已于 2024-12-07 10:33:17 修改

阅读量308

点赞数 2

文章标签： javascript 计算机外设前端

于 2024-11-30 17:38:36 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44024168/article/details/144158084

版权

原生JS通过鼠标选择区域实现选中对应元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>鼠标拖拽框选多个元素</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        height: 100vh;
        overflow: hidden;
      }
      .item {
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: lightblue;
        display: inline-block;
        position: absolute;
      }
      .selected {
        background-color: orange;
      }
      .selection-box {
        position: absolute;
        border: 2px dashed rgba(0, 0, 0, 0.5);
        background-color: rgba(0, 0, 255, 0.2);
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    <div class="item" style="top: 50px; left: 100px">item1</div>
    <div class="item" style="top: 50px; left: 250px">item2</div>
    <div class="item" style="top: 200px; left: 100px">item3</div>
    <div class="item" style="top: 200px; left: 250px">item4</div>
  </body>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      let startX, startY, selectionBox;
      let items = document.querySelectorAll(".item");
      let selectedItems = [];

      // 鼠标按下事件：记录起始位置并创建选择框
      document.addEventListener("mousedown", function (e) {
        // 仅在鼠标左键按下时执行
        if (e.button !== 0) return;

        startX = e.pageX;
        startY = e.pageY;

        // 创建选择框元素
        selectionBox = document.createElement("div");
        selectionBox.classList.add("selection-box");
        document.body.appendChild(selectionBox);

        // 开始监听鼠标移动和松开事件
        document.addEventListener("mousemove", onMouseMove);
        document.addEventListener("mouseup", onMouseUp);
      });

      // 鼠标移动事件：更新选择框的大小和位置
      function onMouseMove(e) {
        const width = e.pageX - startX;
        const height = e.pageY - startY;

        // 设置选择框的位置和尺寸
        selectionBox.style.left = `${Math.min(startX, e.pageX)}px`;
        selectionBox.style.top = `${Math.min(startY, e.pageY)}px`;
        selectionBox.style.width = `${Math.abs(width)}px`;
        selectionBox.style.height = `${Math.abs(height)}px`;
      }

      // 鼠标松开事件：检查哪些元素在选择框内，并更新选中状态
      function onMouseUp(e) {
        // 每次都重置一下之前的 selectedItems
        selectedItems = [];
        // 获取选择框的边界
        const box = selectionBox.getBoundingClientRect();

        // 检查每个元素是否在选择框内
        items.forEach((item) => {
          const rect = item.getBoundingClientRect();

          if (isElementInBox(rect, box)) {
            item.classList.add("selected");
            selectedItems.push({
              node: item,
              id: item.innerText,
            });
          } else {
            item.classList.remove("selected");
          }
        });
        // 移除选择框
        document.body.removeChild(selectionBox);
        // 清除事件监听器
        document.removeEventListener("mousemove", onMouseMove);
        document.removeEventListener("mouseup", onMouseUp);
        console.log("selectedItems====>", selectedItems);
      }

      // 判断元素是否在选择框内
      function isElementInBox(elementRect, boxRect) {
        return (
          elementRect.right > boxRect.left &&
          elementRect.left < boxRect.right &&
          elementRect.bottom > boxRect.top &&
          elementRect.top < boxRect.bottom
        );
      }
    });
  </script>
</html>