pDroppable is attached to an element to add a drop behavior. The value of the pDroppable attribute should have the same scope as pDraggable.
Droppable scope can also be an array to accept multiple droppables.
The droppable element can fire four events:
Event name | Description |
onDragEnter | Invoked when a draggable element enters the drop area. |
onDragOver | Invoked when a draggable element is being dragged over the drop area. |
onDrop | Invoked when a draggable is dropped onto the drop area. |
onDragLeave | Invoked when a draggable element leaves the drop area. |
In the demo application, the whole code of the droppable area looks as follows:
<div pDroppable="docs" (onDrop)="drop($event)"
[ngClass]="{'dragged-doc': draggedDoc}">
<p-dataTable [value]="deletedDocs">
<p-header>Recycle Bin</p-header>
<p-column field="title" header="Title"></p-column>
<p-column...