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-1 surface-border border-round w-15rem">
<ul class="list-none flex flex-column gap-2 p-0 m-0">
<li *ngFor="let product of availableProducts" class="p-2 border-round shadow-1" pDraggable (onDragStart)="dragStart(product)" (onDragEnd)="dragEnd()">
{{product.name}}
</li>
</ul>
</div>
<div class="p-2 border-1 surface-border border-round w-15rem" pDroppable (onDrop)="drop()">
<p class="text-center surface-border border-bottom-1">Drop Zone</p>
<ul class="list-none flex flex-column gap-2 p-0 m-0" *ngIf="selectedProducts" >
<li *ngFor="let product of selectedProducts" class="p-2 border-round shadow-1">
{{product.name}}
</li>
</ul>
</div>
Drag and Drop to Table
ID | Category | Name | Price |
---|
<div class="card grid grid-nogutter">
<div class="col-12 md:col-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)"></p-tag>
</div>
</div>
</div>
</div>
<div class="col-12 md:col-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-1 surface-border border-round w-15rem h-10rem">
<ul class="list-none flex flex-column gap-2 p-0 m-0">
<li *ngFor="let product of availableProducts" class="p-2 border-round shadow-1" pDraggable (onDragStart)="dragStart(product)" (onDragEnd)="dragEnd()">
{{product.name}}
</li>
</ul>
</div>
<div class="p-2 w-15rem h-10rem drop-column" pDroppable (onDrop)="drop()">
<p class="text-center surface-border border-bottom-1">Drop Zone</p>
<ul class="list-none flex flex-column gap-2 p-0 m-0" *ngIf="selectedProducts" >
<li *ngFor="let product of selectedProducts" class="p-2 border-round shadow-1">
{{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-15rem">
<p-panel header="Drag Header">
Content
</p-panel>
</div>
API defines helper props, events and others for the PrimeNG Drag and Drop module.
Name | Type | Default | Description |
---|---|---|---|
dragEffect | string | null | Defines the cursor style, valid values are none, copy, move, link, copyMove, copyLink, linkMove and all. |
dragHandle | string | null | Selector to define the drag handle, by default anywhere on the target element is a drag handle to start dragging. |
pDraggableDisabled | boolean | false | Whether the element is draggable, useful for conditional cases. |
Name | Parameters | Description |
---|---|---|
onDragStart | event: browser event | Callback to invoke when drag begins. |
onDrag | event: browser event | Callback to invoke on dragging. |
onDragEnd | event: browser event | Callback to invoke when drag ends. |
Name | Type | Default | Description |
---|---|---|---|
dragEffect | string | null | Defines the cursor style, valid values are none, copy, move, link, copyMove, copyLink, linkMove and all. |
dragHandle | string | null | Selector to define the drag handle, by default anywhere on the target element is a drag handle to start dragging. |
pDraggableDisabled | boolean | false | Whether the element is draggable, useful for conditional cases. |
Name | Parameters | Description |
---|---|---|
onDragEnter | event: browser event | Callback to invoke when a draggable enters drop area. |
onDrop | event: browser event | Callback to invoke when a draggable is dropped onto drop area. |
onDragLeave | event: browser event | Callback to invoke when a draggable leave drop area. |