带边界的拖拽实现：解决Div元素重叠问题

首先要明确：cdkDragBoundary的作用只是限制拖拽元素的移动范围（比如只能在父容器内），它不具备元素间的碰撞检测能力，所以你用.example-boundary:not(.example-box)这种选择器完全达不到避免重叠的效果——这个选择器本身逻辑也有问题，.example-boundary是父容器，它本身就没有.example-box类，所以:not(.example-box)等于没加。

要解决拖拽元素重叠，得通过CDK Drag的事件结合碰撞检测逻辑来实现，具体步骤如下：

实现思路 #

• 监听拖拽元素的cdkDragMoved事件，在每次移动时获取当前拖拽元素的位置和尺寸
• 遍历其他所有拖拽元素，计算它们的位置和尺寸，判断是否和当前拖拽元素发生重叠
• 如果检测到重叠，通过cdkDragFreeDragPosition手动调整当前元素的位置，或者阻止继续向重叠方向移动

代码示例 #

HTML部分 #

<div class="example-boundary">
  <div
    class="example-box"
    cdkDrag
    (cdkDragMoved)="onDragMoved($event, 0)"
    [cdkDragFreeDragPosition]="positions[0]"
  >
    Item 1
  </div>
  <div
    class="example-box"
    cdkDrag
    (cdkDragMoved)="onDragMoved($event, 1)"
    [cdkDragFreeDragPosition]="positions[1]"
  >
    Item 2
  </div>
</div>

TypeScript部分 #

import { Component } from '@angular/core';
import { CdkDragMove } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-drag-example',
  templateUrl: './drag-example.component.html',
  styleUrls: ['./drag-example.component.css']
})
export class DragExampleComponent {
  // 初始化每个元素的位置
  positions = [{ x: 0, y: 0 }, { x: 150, y: 0 }];

  onDragMoved(event: CdkDragMove, index: number) {
    const currentElement = event.source.element.nativeElement;
    const currentRect = currentElement.getBoundingClientRect();
    
    // 遍历其他元素，检查碰撞
    for (let i = 0; i < this.positions.length; i++) {
      if (i === index) continue;

      const otherElement = document.querySelectorAll('.example-box')[i];
      const otherRect = otherElement.getBoundingClientRect();

      // 判断是否重叠（简单的矩形碰撞检测）
      const isOverlapping = !(
        currentRect.right < otherRect.left ||
        currentRect.left > otherRect.right ||
        currentRect.bottom < otherRect.top ||
        currentRect.top > otherRect.bottom
      );

      if (isOverlapping) {
        // 发生重叠，回退到上一次的位置
        event.source._dragRef.reset();
        break;
      }
    }
  }
}

CSS部分（可选，给元素加样式方便观察） #

.example-boundary {
  width: 500px;
  height: 300px;
  border: 2px solid #ccc;
  position: relative;
  padding: 10px;
}

.example-box {
  width: 120px;
  height: 80px;
  background: #42a5f5;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: move;
  position: absolute;
}

补充说明 #

• 上面的示例用了简单的矩形碰撞检测，你可以根据需求调整更精细的逻辑（比如只在重叠超过一定比例时触发回退）
• 如果有多个拖拽元素，建议把元素的位置和尺寸数据统一管理，避免重复获取DOM信息
• event.source._dragRef.reset()是直接回退到拖拽前的位置，你也可以根据碰撞方向调整位置（比如把当前元素推到不重叠的位置）

内容的提问来源于stack exchange，提问作者Katerina Maria Gerakianaki