I am creating dynamic columns with some items in them at the moment. However, when I try to drag and drop the item, it thinks its still in the same container.

I add a moved event method and see that the id isnt changing which make sense because if (event.previousContainer === event.container) is always true when I drop the item (even though I believe I am hovering over another container). Please help there are no good answers or answers at all ive been searching for hours.

HTML

<div class="kanban-board">
    <div *ngFor="let column of columns" class="kanban-column">
        <h2>{{ column.title }}</h2>
        <div cdkDropList 
            id="{{column.guid}}" 
            [cdkDropListData]="column.items" 
            (cdkDropListDropped)="drop($event)" 
            class="kanban-column-list"
            cdkDropListSortingDisabled
            cdkDropListOrientation="vertical">
            <div *ngFor="let item of column.items" 
                cdkDrag 
                class="kanban-item" 
                [cdkDragData]=item
                (cdkDragMoved)="moved($event)"
                >
                <p>{{item.name}}</p>
            </div>
        </div>
    </div>
</div>

.ts

  moved(event: CdkDragMove){
    console.log(event.source.dropContainer.id)
  }

  // Handle drag-and-drop events
  drop(event: CdkDragDrop<any[]>) {
    // const previousIndex = this.columns[event.previousContainer.id].items.findIndex((item: any) => item === event.item.data);
    const previousIndex = this.columns.findIndex((item: any) => item.guid === event.previousContainer.data[0].guid);
    
    // If the dragged item is dropped in the same container
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, previousIndex, event.currentIndex);
    } else {
      // If the dragged item is moved from one container to another
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        previousIndex,
        event.currentIndex
      );
    }

    // Send update to the backend
    this.kanbanService.updateColumn(event.container.id, event.container.data);
  }

.scss

.kanban-board {
  display: flex;
  justify-content: space-around;
}

.kanban-column {
  width: 300px;
  height: 100Vh;
  margin: 10px;
  padding: 10px;
  background-color: #f4f4f4;
  border-radius: 8px;
}

.kanban-column-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: lightseagreen;
}

.kanban-item {
  background-color: #fff;
  margin: 8px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: grab;
}