Drag and Drop
pDraggable and pDroppable directives apply drag-drop behaviors to any element.
Import #
import { DragDropModule } from '@openng/optimus-ui/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
DataTable #
Drag and Drop to Table
| ID | Category | Name | Price |
|---|
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
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