Angular拖拽交互问题：数组元素位置绑定异常排查

我帮你逐个分析这三个问题的根源，再给出针对性的修复方案：

问题根源 #

你的existingDroppedItemZoneIn数组里的对象用spans存储位置，但拖拽组件的移动事件完全没关联到这个字段的更新；而且move方法只处理了dropzone1的结构（用pos数组存位置），完全没考虑existingDroppedItemZoneIn的spans同步逻辑，拖拽时的位置数据也没绑定到对应对象上。

修复步骤 #

1. 给appMovable组件加一个位置变更的输出事件（比如positionChange），用来监听拖拽时的位置变化
2. 实现一个更新existingZone位置的方法：

updateExistingZonePosition(zone: any, position: {top: number, left: number}) {
  // 同步更新spans数组的值
  zone.spans[1] = position.top;
  zone.spans[0] = position.left;
}

3. 修改模板中existingZone对应的DOM节点，绑定位置更新事件：

<div class="box" appMovable 
     (positionChange)="updateExistingZonePosition(existingZone, $event)"
     [ngStyle] = "{'position': 'absolute', 'top.%':existingZone.spans[1], 'left.%':existingZone.spans[0]}">
  {{ existingZone.main }}
  <span style="display: none">{{existingZone.spans[0]}}</span>
  <span style="display: none">{{existingZone.spans[1]}}</span>
  <span (click)="removeBox(existingZone,existingDroppedItemZoneIn,true)"> x </span>
</div>

问题根源 #

移除盒子时只是把它放回了roomsFloorZoneIn，但对象里的位置数据（pos或spans）没被清除；再次拖入时直接复用了旧对象，导致之前的位置值被保留下来。

修复步骤 #

在removeBox方法中，当flag为true时，重置对象的位置数据：

removeBox(item: any, list, flag:boolean = false) {
  const index = list.indexOf(item);
  if (index !== -1) {
    const removedItem = list.splice(index, 1)[0];
    if(flag){
      // 重置位置数据为默认初始值
      if(removedItem.pos) removedItem.pos = [0, 0];
      if(removedItem.spans) removedItem.spans = [0, 0];
      this.roomsFloorZoneIn.push(removedItem);
    }
  }
}

另外，move方法里拖入新对象时，也要确保初始化位置为默认值，不要复用全局的topLeft：

move(box: any, toList: any[]): void {
    let objTemp:any = { 
      dis: box,
      pos: [0, 0] // 初始化独立的位置数组
    };
    this.removeBox(box,this.roomsFloorZoneIn);
    toList.push(objTemp);
}

问题根源 #

你用了全局的topLeft数组存储位置，existingDroppedItemZoneIn和dropzone1的对象可能共享了这个数组的引用，导致修改其中一个时，另一个的位置也跟着变；另外currentBoxFloorZone被多个逻辑共用，也会导致数据串用。

修复步骤 #

1. 删掉全局的topLeft数组，让每个拖拽对象自己维护独立的位置数据，彻底避免引用共享问题
2. 修改move方法，不再依赖全局变量，给每个新拖入的对象创建独立的位置数组：

move(box: any, toList: any[]): void {
    // 直接使用传入的box，不要覆盖为currentBoxFloorZone，避免数据串用
    let objTemp:any = { 
      dis: box,
      pos: [0, 0] // 每个对象用自己的位置数组
    };
    this.removeBox(box,this.roomsFloorZoneIn);
    toList.push(objTemp);
}

3. 调整拖拽组件的位置更新逻辑，让它直接修改当前绑定对象的位置属性（比如existingZone.spans或box.pos），不再依赖全局变量。

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