当前位置：首页 > JavaScript

js实现框选

2026-01-31 14:20:19JavaScript

实现框选的基本思路

框选功能通常涉及鼠标事件的监听、DOM元素的动态创建与样式调整。核心逻辑包括监听鼠标按下、移动和抬起事件，计算框选区域，并高亮被选中的元素。

监听鼠标事件

在文档上添加mousedown、mousemove和mouseup事件监听器。mousedown事件触发时记录起始坐标，mousemove事件触发时动态更新框选区域，mouseup事件触发时结束框选并处理选中元素。

let isSelecting = false;
let startX, startY;
let selectionBox;

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

  selectionBox = document.createElement('div');
  selectionBox.style.position = 'fixed';
  selectionBox.style.border = '2px dashed #000';
  selectionBox.style.pointerEvents = 'none';
  document.body.appendChild(selectionBox);
});

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

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

  const left = Math.min(startX, currentX);
  const top = Math.min(startY, currentY);
  const width = Math.abs(currentX - startX);
  const height = Math.abs(currentY - startY);

  selectionBox.style.left = `${left}px`;
  selectionBox.style.top = `${top}px`;
  selectionBox.style.width = `${width}px`;
  selectionBox.style.height = `${height}px`;
});

document.addEventListener('mouseup', () => {
  if (!isSelecting) return;
  isSelecting = false;
  document.body.removeChild(selectionBox);
  // 处理选中逻辑
});

计算选中元素

在mouseup事件中，遍历需要被框选的元素，检查其是否与框选区域相交。可以通过比较元素的边界框（getBoundingClientRect）与框选区域的位置关系实现。

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.addEventListener('mouseup', () => {
  if (!isSelecting) return;
  isSelecting = false;

  const elements = document.querySelectorAll('.selectable');
  elements.forEach(element => {
    if (isElementInSelection(element, selectionBox)) {
      element.classList.add('selected');
    }
  });

  document.body.removeChild(selectionBox);
});

样式与交互优化

为框选区域和选中元素添加样式，提升用户体验。例如，选中元素可以高亮显示，框选区域可以半透明填充。

.selected {
  background-color: rgba(0, 123, 255, 0.3);
}

.selection-box {
  background-color: rgba(0, 123, 255, 0.1);
  border: 2px dashed #007bff;
}

完整代码示例

以下是一个完整的实现示例，包含框选功能和高亮选中元素。

let isSelecting = false;
let startX, startY;
let selectionBox;

document.addEventListener('mousedown', (e) => {
  if (e.target.classList.contains('selectable')) return;

  isSelecting = true;
  startX = e.clientX;
  startY = e.clientY;

  selectionBox = document.createElement('div');
  selectionBox.className = 'selection-box';
  document.body.appendChild(selectionBox);
});

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

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

  const left = Math.min(startX, currentX);
  const top = Math.min(startY, currentY);
  const width = Math.abs(currentX - startX);
  const height = Math.abs(currentY - startY);

  selectionBox.style.left = `${left}px`;
  selectionBox.style.top = `${top}px`;
  selectionBox.style.width = `${width}px`;
  selectionBox.style.height = `${height}px`;
});

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

  const elements = document.querySelectorAll('.selectable');
  elements.forEach(element => {
    if (isElementInSelection(element, selectionBox)) {
      element.classList.add('selected');
    } else {
      element.classList.remove('selected');
    }
  });

  document.body.removeChild(selectionBox);
});

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
  );
}