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 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>

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-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>

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 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>

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-60">
    <p-panel header="Drag Header">
        Content
    </p-panel>
</div>
PrimeNG 18.0.2 by PrimeTek