Drag and Drop

import { AXDragDropModule } from '@acorex/cdk/drag-drop';

A flexible set of directives for implementing drag-and-drop functionality in your Angular applications.

Drag

Demonstrates a basic draggable element. Click and drag the box below. The title itself is also draggable within the page layout.

Draggable Item

Restricting movement along an axis

Use the dragLockAxis input to constrain dragging to either the 'x' (horizontal) or 'y' (vertical) axis.

Draggable Item only Up/Down

Draggable Item only Left/Right

Drag with boundary

The dragBoundary input restricts movement to within a specified HTML element or a CSS selector. Try dragging the box only within its container.

Draggable Item

Drag with handle

Use the axDragHandle directive to specify a child element that acts as the handle for dragging the parent. Only dragging the icon will move the box.

Draggable Item

Drop zone

The axDropZone directive creates an area where draggable items can be dropped. It can emit events on hover and drop, and interact with items from a matching dropZoneGroup.

Drop zone (Group 1)

Draggable (Group 1)

Clone drag

Set dragElementClone to true to drag a copy of the element, leaving the original in place. A custom dragClonedTemplate can also be provided for the clone's appearance.

Draggable Item (Clone)

Draggable (Custom Clone Template)

Drop list

The axDropList directive enables reordering of axDrag items within a container. Drag items within the list to sort them. An event (dropListDropped) is emitted when the order is changed, allowing you to update your data model.

Vertical List (Default):

Item 1

Item 2

Item 3

Item 4

Horizontal List :

Item 1

Item 2

Item 3

Item 4

Connected lists

You can connect multiple axDropList containers by giving them the same dropListGroup. This allows items to be dragged from one list to another. The (dropListDropped) event provides all the necessary information, including the previous and current containers and indices, to update your data arrays using utilities like transferArrayItem.

To Do

Get to work

Pick up groceries

Go home

Fall asleep

Done

Get up

Brush teeth

Take a shower

Check e-mail

Walk dog