当前位置：首页 > JavaScript

js实现框选

2026-04-05 06:27:45JavaScript

实现框选的基本思路

框选功能通常涉及监听鼠标事件，记录起始和结束位置，动态绘制选框。以下是具体实现方法：

监听鼠标事件

在需要框选的容器上绑定mousedown、mousemove和mouseup事件：

const container = document.getElementById('selectable-area');
let isSelecting = false;
let startX, startY;

container.addEventListener('mousedown', (e) => {
  isSelecting = true;
  startX = e.clientX;
  startY = e.clientY;
});

document.addEventListener('mousemove', (e) => {
  if (!isSelecting) return;
  // 更新选框位置和尺寸
});

document.addEventListener('mouseup', () => {
  isSelecting = false;
  // 清除选框或执行选中逻辑
});

动态绘制选框

创建绝对定位的div作为选框元素，并根据鼠标位置调整其样式：

const selectionBox = document.createElement('div');
selectionBox.style.position = 'absolute';
selectionBox.style.border = '2px dashed #000';
selectionBox.style.backgroundColor = 'rgba(0, 0, 255, 0.1)';
document.body.appendChild(selectionBox);

// 在mousemove事件中更新选框
const currentX = e.clientX;
const currentY = e.clientY;
selectionBox.style.left = Math.min(startX, currentX) + 'px';
selectionBox.style.top = Math.min(startY, currentY) + 'px';
selectionBox.style.width = Math.abs(currentX - startX) + 'px';
selectionBox.style.height = Math.abs(currentY - startY) + 'px';

检测元素碰撞

判断目标元素是否在选框区域内：

function isElementInSelection(element, selectionBox) {
  const elementRect = element.getBoundingClientRect();
  const selectionRect = selectionBox.getBoundingClientRect();

  return !(
    elementRect.right < selectionRect.left ||
    elementRect.left > selectionRect.right ||
    elementRect.bottom < selectionRect.top ||
    elementRect.top > selectionRect.bottom
  );
}

// 遍历所有可选元素
document.querySelectorAll('.selectable-item').forEach(item => {
  if (isElementInSelection(item, selectionBox)) {
    item.classList.add('selected');
  }
});

清除选框状态

鼠标释放时移除选框元素或重置状态：

js实现框选

document.addEventListener('mouseup', () => {
  isSelecting = false;
  selectionBox.remove();
  // 或重置选框尺寸
  selectionBox.style.width = '0';
  selectionBox.style.height = '0';
});

完整示例代码

document.addEventListener('DOMContentLoaded', () => {
  const container = document.getElementById('selectable-area');
  const selectionBox = document.createElement('div');
  let isSelecting = false;
  let startX, startY;

  selectionBox.style.position = 'absolute';
  selectionBox.style.border = '2px dashed #000';
  selectionBox.style.backgroundColor = 'rgba(0, 0, 255, 0.1)';
  selectionBox.style.display = 'none';
  document.body.appendChild(selectionBox);

  container.addEventListener('mousedown', (e) => {
    isSelecting = true;
    startX = e.clientX;
    startY = e.clientY;
    selectionBox.style.left = `${startX}px`;
    selectionBox.style.top = `${startY}px`;
    selectionBox.style.width = '0';
    selectionBox.style.height = '0';
    selectionBox.style.display = 'block';
  });

  document.addEventListener('mousemove', (e) => {
    if (!isSelecting) return;

    const currentX = e.clientX;
    const currentY = e.clientY;

    selectionBox.style.left = Math.min(startX, currentX) + 'px';
    selectionBox.style.top = Math.min(startY, currentY) + 'px';
    selectionBox.style.width = Math.abs(currentX - startX) + 'px';
    selectionBox.style.height = Math.abs(currentY - startY) + 'px';
  });

  document.addEventListener('mouseup', () => {
    if (!isSelecting) return;
    isSelecting = false;
    selectionBox.style.display = 'none';

    document.querySelectorAll('.selectable-item').forEach(item => {
      const elementRect = item.getBoundingClientRect();
      const selectionRect = selectionBox.getBoundingClientRect();

      if (!(
        elementRect.right < selectionRect.left ||
        elementRect.left > selectionRect.right ||
        elementRect.bottom < selectionRect.top ||
        elementRect.top > selectionRect.bottom
      )) {
        item.classList.toggle('selected');
      }
    });
  });
});