Drag and Drop

pDraggable and pDroppable directives apply drag-drop behaviors to any element.

Import #


import { DragDropModule } from 'primeng/dragdrop';

Basic #

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.

Black Watch
Bamboo Watch

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>

299

INSTOCK

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>

Drop Indicator #

When a suitable draggable enters a droppable area, the area gets p-draggable-enter class that can be used to style the droppable section.

Black Watch
Bamboo Watch

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>

Drag Handle #

dragHandle is used to restrict dragging unless mousedown occurs on the specified element. Panel below can only be dragged using its header.

Drag Header

Content



<div pDraggable dragHandle=".p-panel-header" class="w-15rem">
    <p-panel header="Drag Header">
        Content
    </p-panel>
</div>

Drag and Drop API

API defines helper props, events and others for the PrimeNG Drag and Drop module.

Properties of Draggable #

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.

Events of Draggable #

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.

Properties of Droppable #

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.

Events of Droppable #

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.