DEV Community

loading...
Cover image for Angular Drag and Drop

Angular Drag and Drop

primetek profile image PrimeTek ・1 min read

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';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

Forem Open with the Forem app