如何实现点击/拖拽未选中div时取消所有选中状态（仅对未选中div生效）

我开发了一个支持选择widget并批量拖拽的系统，目前存在问题：选中两个widget后，拖拽未选中的widget时，所有widget都会被拖拽，不符合预期。

预期效果：鼠标按下在未选中的widget上时，移除所有已选中widget的.selected类；但该逻辑仅对未选中的widget生效，不能作用于已选中的widget。

问题根源 #

1. 同时存在两套拖拽逻辑：全局mousedown绑定的批量拖拽，和dragElement函数的单个拖拽，两者冲突导致意外行为
2. 点击未选中widget时，未清空之前的选中状态，导致批量拖拽的元素集合仍包含旧的选中项
3. 重复绑定document的mousedown事件，且其中一个引用了未定义的squares变量
4. 变量命名混乱（多次用widgets作为循环变量，和全局选择器变量重名）

修改后的完整代码 #

JavaScript

let isSelecting = false;
let selectionStartX, selectionStartY, selectionEndX, selectionEndY;
let selectionRectangle;
let draggedElements = [];
const widgets = document.querySelectorAll('.widgets');

// 统一处理mousedown事件
document.addEventListener('mousedown', (event) => {
  // 点击的是widget元素
  if (event.target.classList.contains('widgets')) {
    const targetWidget = event.target.closest('.widgets[id]'); // 获取最外层的widget容器
    // 判断当前点击的widget是否未被选中
    if (!targetWidget.classList.contains('selected')) {
      // 清空所有选中状态，只选中当前widget
      widgets.forEach(widget => widget.classList.remove('selected'));
      targetWidget.classList.add('selected');
    }
    // 更新拖拽元素集合为当前选中的widget
    draggedElements = Array.from(widgets).filter(widget => widget.classList.contains('selected'));
    
    draggedElements.forEach(widget => {
      const rect = widget.getBoundingClientRect();
      const shiftX = event.clientX - rect.left;
      const shiftY = event.clientY - rect.top;

      function moveElement(event) {
        const x = event.clientX - shiftX;
        const y = event.clientY - shiftY;
        widget.style.left = `${x}px`;
        widget.style.top = `${y}px`;
      }

      function stopMoving() {
        document.removeEventListener('mousemove', moveElement);
        document.removeEventListener('mouseup', stopMoving);
      }

      document.addEventListener('mousemove', moveElement);
      document.addEventListener('mouseup', stopMoving);
    });
    return;
  }

  // 点击空白区域，开始框选
  if (event.target !== selectionRectangle) {
    isSelecting = true;
    selectionStartX = event.clientX;
    selectionStartY = event.clientY;
    
    selectionRectangle = document.createElement('div');
    selectionRectangle.id = 'selection-rectangle';
    selectionRectangle.style.position = 'absolute';
    selectionRectangle.style.border = '2px dashed blue';
    selectionRectangle.style.pointerEvents = 'none';
    selectionRectangle.style.display = 'none';
    document.body.appendChild(selectionRectangle);

    // 清空所有选中状态
    widgets.forEach(widget => widget.classList.remove('selected'));
  }
});

document.addEventListener('mousemove', (event) => {
  if (isSelecting) {
    selectionEndX = event.clientX;
    selectionEndY = event.clientY;

    const width = Math.abs(selectionEndX - selectionStartX);
    const height = Math.abs(selectionEndY - selectionStartY);
    const left = Math.min(selectionEndX, selectionStartX);
    const top = Math.min(selectionEndY, selectionStartY);

    selectionRectangle.style.width = `${width}px`;
    selectionRectangle.style.height = `${height}px`;
    selectionRectangle.style.left = `${left}px`;
    selectionRectangle.style.top = `${top}px`;
    selectionRectangle.style.display = 'block';

    widgets.forEach(widget => {
      const widgetRect = widget.getBoundingClientRect();
      const isIntersecting = isRectangleIntersecting(widgetRect, {
        x: left,
        y: top,
        width,
        height,
      });
      if (isIntersecting) {
        widget.classList.add('selected');
      } else {
        widget.classList.remove('selected');
      }
    });
  }
});

document.addEventListener('mouseup', () => {
  if (isSelecting) {
    isSelecting = false;
    selectionRectangle.remove();
  }
});

// 判断矩形是否相交（包含）
function isRectangleIntersecting(rect1, rect2) {
  return (
    rect1.left >= rect2.x &&
    rect1.top >= rect2.y &&
    rect1.right <= rect2.x + rect2.width &&
    rect1.bottom <= rect2.y + rect2.height
  );
}

CSS

#selection-rectangle {
  position: absolute;
  border: 2px dashed blue;
  pointer-events: none;
  display: none;
  z-index: 9999999;
}

.widgets.selected {
  outline-color: blue;
  outline-width: 2px;
  outline-style: dashed;
}

#widget1, #widget2, #widget3 {
  position: absolute;
  z-index: 9;
  background-color: #ff0000;
  color: white;
  font-size: 25px;
  font-family: Arial, Helvetica, sans-serif;
  border: 2px solid #212128;
  text-align: center;
  width: 100px;
  height: 100px;
}

#widget1header, #widget2header, #widget3header {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #040c14;
  outline-color: rgb(0, 0, 0);
  outline-width: 2px;
  outline-style: solid;
}

HTML

<div id="widget1" class="widgets" style="left: 50px; top: 50px;">
  <div id="widget1header"></div>
</div>
<div id="widget2" class="widgets" style="left: 150px; top: 150px;">
  <div id="widget2header"></div>
</div>
<div id="widget3" class="widgets" style="left: 250px; top: 250px;">
  <div id="widget3header"></div>
</div>

关键修改说明 #

• 移除了冲突的dragElement函数，统一用全局mousedown事件处理所有拖拽逻辑
• 点击未选中的widget时，自动清空所有选中状态，仅选中当前点击的widget，避免旧选中项被意外拖拽
• 修复了未定义的squares变量问题，合并了重复的mousedown事件
• 修正了变量命名混乱的问题，将循环变量从widgets改为widget，避免和全局变量混淆
• 用closest('.widgets[id]')确保获取的是最外层的widget容器，防止点击header时出错

内容的提问来源于stack exchange，提问作者AKSIL