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>

DataTable #

Drag and Drop to Table

Bamboo Watch
Bamboo Watch
Accessories
65
INSTOCK
Black Watch
Black Watch
Accessories
72
INSTOCK
Blue Band
Blue Band
Fitness
79
LOWSTOCK
Blue T-Shirt
Blue T-Shirt
Clothing
29
INSTOCK
Bracelet
Bracelet
Accessories
15
INSTOCK
Brown Purse
Brown Purse
Accessories
120
OUTOFSTOCK
Chakra Bracelet
Chakra Bracelet
Accessories
32
LOWSTOCK
Galaxy Earrings
Galaxy Earrings
Accessories
34
INSTOCK
Game Controller
Game Controller
Electronics
99
LOWSTOCK
Gaming Set
Gaming Set
Electronics
299
INSTOCK
IDCategoryNamePrice

<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)" />
                    </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>
PrimeNG 17.18.12 by PrimeTek