JavaScript实现鼠标框选多选功能

Cora

发布时间：2026-10-14| 4人浏览过

原创

本文介绍利用原生 JavaScript 实现鼠标拖拽框选区域以批量选择页面上多个元素（如文件或项目）的方法。该功能常用于文件管理器或多列表界面，允许用户通过绘制一个矩形选区来同时选中区域内的所有项，从而替代繁琐的逐个点击操作。

实现原理

该功能的核心在于精准计算鼠标拖拽形成的矩形区域与页面中各个目标元素的边界关系。当按下鼠标并拖动时，实时绘制一个可视化的半透明矩形作为辅助框；松开鼠标后，遍历所有候选元素，判断其位置是否与该矩形有交集，进而更新元素的选择状态。

第1步：定义目标元素样式

首先为需要支持框选的容器内的子元素添加统一的 CSS 类名，用于区分可选项和已选项。例如，使用 .fileDiv 表示普通项，.seled 表示当前处于被框选状态的项。

第2步：获取并缓存目标元素集合

在初始化或每次触发时，定位页面上所有需要被框选的元素，将其存入数组以便后续快速进行位置比对。


// 清空原有样式并重新收集元素
var selList = [];
var fileNodes = document.getElementsByTagName("div"); 
for ( var i = 0; i < fileNodes.length; i++) { 
  if (fileNodes[i].className.indexOf("fileDiv") != -1) { 
    // 重置未选中状态
    fileNodes[i].className = "fileDiv"; 
    selList.push(fileNodes[i]); 
  } 
}

第3步：创建并显示拖拽辅助框

在鼠标按下瞬间（mousedown），创建一个绝对定位的 <div> 元素作为视觉辅助框。记录起始坐标，并将该辅助框插入 DOM 树中。


var isSelect = true; // 标记是否正在执行框选
var evt = window.event || arguments[0];
var startX = evt.x || evt.clientX; 
var startY = evt.y || evt.clientY;

// 配置辅助框样式
var selDiv = document.createElement("div"); 
selDiv.style.cssText = "position:absolute;width:0px;height:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;opacity:0.6;display:none;";
document.body.appendChild(selDiv);
selDiv.style.display = "";
selDiv.style.left = startX + "px";
selDiv.style.top = startY + "px";

第4步：处理移动事件并更新选区

在鼠标移动（mousemove）过程中，根据当前鼠标的实时坐标动态调整辅助框的宽度、高度及左上角位置。这一步是实时响应用户操作的关键，需注意兼容不同浏览器的坐标属性（clientX/Y 与 X/Y）。


document.onmousemove = function() {
  if (!isSelect) return;
  var _x = evt.clientX || evt.x;
  var _y = evt.clientY || evt.y;

  // 设置辅助框位置（确保四个角落方向均可正确拉伸）
  selDiv.style.left = Math.min(_x, startX) + "px";
  selDiv.style.top = Math.min(_y, startY) + "px";
  selDiv.style.width = Math.abs(_x - startX) + "px";
  selDiv.style.height = Math.abs(_y - startY) + "px";

  // 调用核心算法进行位置检测
  checkSelection(_l, _t, _w, _h);
};

第5步：检测重叠算法

在每一帧移动中，将当前矩形的边界与列表中每个元素的边界进行对比。如果目标元素位于矩形范围内，则为其添加选中样式；否则移除选中样式。


function checkSelection(l, t, w, h) {
  for ( var i = 0; i < selList.length; i++) {
    // 获取单个元素相对于页面的精确位置
    var elL = selList[i].offsetLeft;
    var elT = selList[i].offsetTop;
    var elW = selList[i].offsetWidth;
    var elH = selList[i].offsetHeight;

    // 矩形判定：检查是否有重叠
    if (!(elL + elW < l || elL > l + w || elT + elH < t || elT > t + h)) {
       if (selList[i].className.indexOf("seled") == -1) {
          selList[i].className += " seled";
       }
    } else {
      if (selList[i].className.indexOf("seled") != -1) {
        selList[i].className = selList[i].className.replace('seled', '').trim();
      }
    }
  }
}

第6步：结束框选并获取结果

当鼠标抬起（mouseup）时，停止框选状态，销毁辅助框 DOM 元素，并遍历列表获取所有带有选中样式的元素 ID 或内容。


document.onmouseup = function() {
  isSelect = false;
  // 移除辅助框
  if (selDiv) document.body.removeChild(selDiv);
  // 输出选中结果
  alertSelectedItems();
  // 释放引用
  selDiv = null;
};