Angular CDKDragDrop - How to prevent drag items from one list to another

Question

How can I prevent dragging items from one list to another?

I have 3 lists, I want to allow users to drag and drop from list1 to list2 and not from\to list3 In list 3 I want to enable drag and drop only in the list itself (reorder the items inside the list)

I have trying to use [cdkDropListConnectedTo]="['list-1', 'list-2']" but it still enable to drag from list 3

I also trying to use (cdkDropListEntered)="enterd($event)" (cdkDropListExited)="exit($event)"

but I don't see there is a preventative method for checking if can allow drag and drop

<div cdkDropListGroup>
        <div *ngFor="let sectionData of TableSectionsData"
             cdkDropList
             [cdkDropListData]=sectionData.relatedFieldsList
             (cdkDropListDropped)="drop($event)"
             (cdkDropListEntered)="enterd($event)"
             (cdkDropListExited)="exit($event)"
             [cdkDropListConnectedTo]="['list-1', 'list-2']"
             table-section
             [id]=sectionData.id
             [sectionData]="sectionData"
             (removeField)="removeField($event,sectionData.sectionType)">
        </div>
</div>

please provide stackblitz example – Exception Sep 11 '22 at 08:08 — Exception, Sep 11 '22 at 08:08

score 1 · Answer 1 · answered Sep 11 '22 at 10:40

I have prepared an example that works exactly according to what you need.

I hope it is useful for you

stackblitz

Note that cdkDropListConnectedTo works both with a direct reference to another cdkDropList, or by referencing the id of another drop container:

Angular CDKDragDrop - How to prevent drag items from one list to another

1 Answers1