PrimeNG DragDrop multiple droppables

1.1k Views Asked by At

I have some columns (divs) that simulate a Kanban. I have four columns but for the last column the element could come from the second or third column. I'm using primeNG version 9.1.3

 <div class="ui-g-12 cockpit-card" *ngFor="let item of cockpitListPO.listOpen" pDraggable="open" (onDragStart)="openDragStart($event, item)" (onDragEnd)="openDragEnd($event)"> ...
 <div class="ui-g-12 cockpit-card" *ngFor="let item of cockpitListPO.listProgress" pDraggable="progress" pDroppable="open" (onDragStart)="progressDragStart($event, item)" (onDragEnd)="progressDragEnd($event)" (onDrop)="progressDrop($event)"> ...
 <div class="ui-g-12 cockpit-card" *ngFor="let item of cockpitListPO.listOk" pDraggable="ok" pDroppable="progress" (onDragStart)="okDragStart($event, item)" (onDragEnd)="okDragEnd($event)" (onDrop)="okDrop($event)"> ...
    
 <div class="ui-g-12 cockpit-card" *ngFor="let item of cockpitListPO.listCancel" pDroppable="ok" (onDrop)="cancelDrop($event)"> ...

It works fine from the open column to progress, progress to ok and ok to cancel. I wanted to send to Cancel the elements of the Progress and OK lists I already tried to put pDroppable = "ok, progress" / pDroppable = "[ok, progress]" / pDroppable = "['ok', 'progress']"

Thanks

1

There are 1 best solutions below

1
faisal alowaini On

you can write it in this format

[pDroppable]='["header", "footer", "body"]'