使用cdkDropList实现自由拖拽时元素无法定位到正确位置问题

核心问题点 #

• 事件绑定冲突：同时监听了cdkDropListDropped和cdkDragDropped两类事件，坐标更新的changePosition方法未被实际调用，拖入新元素时仅做了数组重排，未给元素赋值位置属性，导致元素默认渲染在左上角。
• 样式绑定错误：app-element-box的z-index写死在字符串中未被解析为变量，且未给.drop-container设置position: relative，绝对定位的元素坐标计算基准错误。
• 坐标计算逻辑错误：同时叠加了元素当前偏移和拖拽位移，导致坐标重复计算；直接修改DOM样式未同步更新itemsInBoard中的数据，重渲染时位置被覆盖。
• 新元素属性缺失：从外部列表拖入元素时，仅复制了原数据未补充top、left属性，位置绑定值为空导致元素跳转到左上角。

修复步骤 #

1. 修正样式绑定 #

给放置区容器.drop-container添加样式：

.drop-container {
  position: relative;
}

修正app-element-box的属性绑定：

<app-element-box *ngFor="let item of itemsInBoard; let i=index" 
                object_name="{{item.name}}" 
                boundary_name=".drop-container" 
                itemSelf="{{item}}"
                [style.position]="'absolute'" 
                [style.z-index]="i+1"
                [style.top]="item.top" 
                [style.left]="item.left"
                (dragStartedEvent)="startedDragging($event)"
></app-element-box>

可移除不需要的dragMovedEvent、dragDroppedEvent监听，避免事件冲突。

2. 新增拖拽偏移量记录 #

在放置区TS文件中添加变量存储鼠标相对于拖拽元素左上角的偏移，避免落点和光标位置错位：

// 新增变量
private dragOffset = { x: 0, y: 0 };

startedDragging(event: CdkDragStart) {
  const dragRect = event.source.element.nativeElement.getBoundingClientRect();
  const pointerPos = event.source._dragRef['_pointerPositionAtLastSequence'];
  this.dragOffset.x = pointerPos.x - dragRect.left;
  this.dragOffset.y = pointerPos.y - dragRect.top;
}

3. 重构释放逻辑 #

统一在cdkDropListDropped事件中处理坐标计算和数组操作，保证数据和视图一致：

// 模板中已绑定(cdkDropListDropped)="itemDropped($event)"
itemDropped(event: CdkDragDrop<any[]>) {
  const containerRect = this.cdkBoard.nativeElement.getBoundingClientRect();
  const dragElementWidth = event.item.element.nativeElement.offsetWidth;
  const dragElementHeight = event.item.element.nativeElement.offsetHeight;

  // 计算合法落点坐标
  let dropX = event.dropPoint.x - containerRect.left - this.dragOffset.x;
  let dropY = event.dropPoint.y - containerRect.top - this.dragOffset.y;
  // 边界校验
  dropX = Math.max(0, Math.min(dropX, containerRect.width - dragElementWidth));
  dropY = Math.max(0, Math.min(dropY, containerRect.height - dragElementHeight));

  if (event.previousContainer === event.container) {
    // 容器内移动，更新对应元素坐标
    moveItemInArray(this.itemsInBoard, event.previousIndex, event.currentIndex);
    this.itemsInBoard[event.currentIndex].top = `${dropY}px`;
    this.itemsInBoard[event.currentIndex].left = `${dropX}px`;
  } else {
    // 外部拖入新元素，补充坐标属性后插入数组
    const newItem = { ...event.previousContainer.data[event.previousIndex] };
    newItem.top = `${dropY}px`;
    newItem.left = `${dropX}px`;
    this.itemsInBoard.push(newItem);
  }
}

可删除未调用的changePosition方法，避免冗余逻辑干扰。

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