pDraggable and pDroppable directives apply drag-drop behaviors to any element.
Setup
Refer to PrimeNG setup documentation for download and installation steps for your environment.
Import
import {DragDropModule} from 'primeng/dragdrop';
Getting Started
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.
<div pDraggable="dd">Draggable Div</div>
<div pDroppable="dd">Droppable Div</div>
Drag Handle
Drag handle is used to restrict dragging unless mousedown occurs on the specified element. Panel below can only be dragged using its header.
<div pDraggable="pnl" dragHandle=".p-panel-titlebar">
<p-panel header="Drag Header">
Content
</p-panel>
</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.
Theming
DragDrop supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeNG DragDrop showcase for demos and documentation.