Angular CDK: Make cdkDropList items draggable?

Question

Recently, I'm working on a scenario which allow user can drag item from one container into drop zone to store items. It would be a way like draw.io does.

However, the items in cdkDropList is sticky. It would not be able to move around.

<div class="left-panel">
        <h6>container</h6>
        <div class="widget-container" 
        cdkDropList
        [id]="'container'"
        [cdkDropListData]="customWidgets"
        [cdkDropListConnectedTo]="['container', 'artBoard']"
        >
            <div cdkDrag><svg height="50" width="50">
            <rect width="50" height="50" style="fill:rgb(0,0,255);stroke- width:3;stroke:rgb(0,0,0)" />
            </svg>
            </div>
        </div>
        
    </div>

<div class="middle-workspace">
        <div class="svg-container" style="width:300px;height:300px;border-style: dotted;" 
        cdkDropList 
        [id]="'artBoard'" 
        [cdkDropListData]="artBoardWidges" 
        [cdkDropListConnectedTo]="['container', 'artBoard']"
        (cdkDropListDropped)="onTalkDrop($event)"
        >
            <app-widget-rect cdkDragBoundary=".svg-container" *ngFor="let artBoardWidge of artBoardWidges"></app-widget-rect>
        </div>
    </div>

Updated 06/26-02:25 Thanks for replying from @FunkMonkey33

The following code below is my dragHandler, apparently it will copy the original item from its container to target container.

onTalkDrop(event: CdkDragDrop<Widget[]>) {
    // In case the destination container is different from the previous container, we
    // need to transfer the given task to the target data array. This happens if
    // a div has been dropped on a different dropList.
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      copyArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
  }