pDraggable and pDroppable directives apply drag-drop behaviors to any element.
import { DragDropModule } from 'primeng/dragdrop';
pDraggable and pDroppable are attached to a target element to add drag-drop behavior. The value of a Directive attribute is required and it defines the scope to match draggables with droppables. Droppable scope can also be an array to accept multiple droppables.
Drop Zone
<div class="p-2 border border-surface rounded-border w-60">
<ul class="list-none flex flex-col gap-2 p-0 m-0">
<li
*ngFor="let product of availableProducts"
class="p-2 rounded-border shadow-sm"
pDraggable
(onDragStart)="dragStart(product)"
(onDragEnd)="dragEnd()">
{{product.name}}
</li>
</ul>
</div>
<div class="p-2 border border-surface rounded-border w-60" pDroppable (onDrop)="drop()">
<p class="text-center border-surface border-b">
Drop Zone
</p>
<ul class="list-none flex flex-col gap-2 p-0 m-0" *ngIf="selectedProducts" >
<li *ngFor="let product of selectedProducts" class="p-2 rounded-border shadow-sm">
{{product.name}}
</li>
</ul>
</div>
Drag and Drop to Table
| ID | Category | Name | Price |
|---|
<div class="card grid grid-cols-12 gap-4 grid-nogutter">
<div class="col-span-12 md:col-span-6 drag-column">
<div *ngFor="let product of availableProducts">
<div
class="product-item"
pDraggable="products"
(onDragStart)="dragStart(product)"
(onDragEnd)="dragEnd()">
<div class="image-container">
<img
src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}"
[alt]="product.name"
class="product-image" />
</div>
<div class="product-list-detail">
<h5 class="mb-2">
{{product.name}}
</h5>
<i class="pi pi-tag product-category-icon"></i>
<span class="product-category">
{{product.category}}
</span>
</div>
<div class="product-list-action">
<h6 class="mb-2">
{{product.price}}
</h6>
<p-tag
[value]="product.inventoryStatus"
[severity]="getSeverity(product.inventoryStatus)" />
</div>
</div>
</div>
</div>
<div class="col-span-12 md:col-span-6 drop-column" pDroppable="products" (onDrop)="drop()">
<p-table [value]="selectedProducts">
<ng-template pTemplate="header">
<tr>
<th>
ID
</th>
<th>
Category
</th>
<th>
Name
</th>
<th>
Price
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>
{{product.id}}
</td>
<td>
{{product.category}}
</td>
<td>
{{product.name}}
</td>
<td>
{{product.price}}
</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
When a suitable draggable enters a droppable area, the area gets p-draggable-enter class that can be used to style the droppable section.
Drop Zone
<div class="p-2 border border-surface rounded-border w-60 h-40">
<ul class="list-none flex flex-col gap-2 p-0 m-0">
<li
*ngFor="let product of availableProducts"
class="p-2 rounded-border shadow-sm"
pDraggable
(onDragStart)="dragStart(product)"
(onDragEnd)="dragEnd()">
{{product.name}}
</li>
</ul>
</div>
<div class="p-2 w-60 h-40 drop-column" pDroppable (onDrop)="drop()">
<p class="text-center border-surface border-b">Drop Zone</p>
<ul class="list-none flex flex-col gap-2 p-0 m-0" *ngIf="selectedProducts" >
<li *ngFor="let product of selectedProducts" class="p-2 rounded-border shadow-sm">
{{product.name}}
</li>
</ul>
</div>
dragHandle is used to restrict dragging unless mousedown occurs on the specified element. Panel below can only be dragged using its header.
<div pDraggable dragHandle=".p-panel-header" class="w-60">
<p-panel header="Drag Header">
Content
</p-panel>
</div>