Drag and Drop

API for drag-drop

API reference for Angular CDK drag-drop

import {DragDropModule} from '@angular/cdk/drag-drop';

Service that allows for drag-and-drop functionality to be attached to DOM elements.

Methods
createDrag

Turns an element into a draggable item.
Parameters

element

HTMLElement | ElementRef<HTMLElement>

Element to which to attach the dragging functionality.

config

DragRefConfig = DEFAULT_CONFIG

Object used to configure the dragging behavior.
Returns
DragRef<T>

createDropList

Turns an element into a drop list.
Parameters

element

HTMLElement | ElementRef<HTMLElement>

Element to which to attach the drop list functionality.
Returns
DropListRef<T>

Container that wraps a set of draggable items.

Selector: [cdkDropList] cdk-drop-list

Exported as: cdkDropList
Properties
Name Description
@Input('cdkDropListConnectedTo')

connectedTo: (CdkDropList | string)[] | CdkDropList | string

Other draggable containers that this container is connected to and into which the container's items can be transferred. Can either be references to other drop containers, or their unique IDs.
@Input('cdkDropListData')

data: T

Arbitrary data to attach to this container.
@Input('cdkDropListDisabled')

disabled: boolean

Whether starting a dragging sequence from this container is disabled.
@Input('cdkDropListEnterPredicate')

enterPredicate: (drag: CdkDrag, drop: CdkDropList) => boolean

Function that is used to determine whether an item is allowed to be moved into a drop container.
@Input()

id: string

Unique ID for the drop zone. Can be used as a reference in the connectedTo of another CdkDropList.
@Input('cdkDropListLockAxis')

lockAxis: 'x' | 'y'

Locks the position of the draggable elements inside the container along the specified axis.
@Input('cdkDropListOrientation')

orientation: 'horizontal' | 'vertical'

Direction in which the list is oriented.
@Output('cdkDropListDropped')

dropped: EventEmitter<CdkDragDrop<T, any>>

Emits when the user drops an item inside the container.
@Output('cdkDropListEntered')

entered: EventEmitter<CdkDragEnter<T>>

Emits when the user has moved a new drag item into this container.
@Output('cdkDropListExited')

exited: EventEmitter<CdkDragExit<T>>

Emits when the user removes an item from the container by dragging it into another container.
@Output('cdkDropListSorted')

sorted: EventEmitter<CdkDragSortEvent<T>>

Emits as the user is swapping items while actively dragging.

element: ElementRef<HTMLElement>

Element that the drop list is attached to.
Methods
drop

Drops an item into this container.
Parameters

item

CdkDrag<any>

Item being dropped into the container.

currentIndex

number

Index at which the item should be inserted.

previousContainer

Partial<CdkDropListContainer<any>>

Container from which the item got dragged in.

isPointerOverContainer

boolean

Whether the user's pointer was over the container when the item was dropped.
enter

Emits an event to indicate that the user moved an item into the container.
Parameters

item

CdkDrag<any>

Item that was moved into the container.

pointerX

number

Position of the item along the X axis.

pointerY

number

Position of the item along the Y axis.
exit

Removes an item from the container after it was dragged into another container by the user.
Parameters

item

CdkDrag<any>

Item that was dragged out.
getItemIndex

Figures out the index of an item in the container.
Parameters

item

CdkDrag<any>

Item whose index should be determined.
Returns
number

start

Starts dragging an item.

Declaratively connects sibling cdkDropList instances together. All of the cdkDropList elements that are placed inside a cdkDropListGroup will be connected to each other automatically. Can be used as an alternative to the cdkDropListConnectedTo input from cdkDropList.

Selector: [cdkDropListGroup]

Exported as: cdkDropListGroup
Properties
Name Description
@Input('cdkDropListGroupDisabled')

disabled: boolean

Whether starting a dragging sequence from inside this group is disabled.

Element that can be moved inside a CdkDropList container.

Selector: [cdkDrag]

Exported as: cdkDrag
Properties
Name Description
@Input('cdkDragBoundary')

boundaryElementSelector: string

Selector that will be used to determine the element to which the draggable's position will be constrained. Matching starts from the element's parent and goes up the DOM until a matching element has been found.
@Input('cdkDragData')

data: T

Arbitrary data to attach to this drag instance.
@Input('cdkDragDisabled')

disabled: boolean

Whether starting to drag this element is disabled.
@Input('cdkDragLockAxis')

lockAxis: 'x' | 'y'

Locks the position of the dragged element along the specified axis.
@Input('cdkDragRootElement')

rootElementSelector: string

Selector that will be used to determine the root draggable element, starting from the cdkDrag element and going up the DOM. Passing an alternate root element is useful when trying to enable dragging on an element that you might not have access to.
@Output('cdkDragDropped')

dropped: EventEmitter<CdkDragDrop<any>>

Emits when the user drops the item inside a container.
@Output('cdkDragEnded')

ended: EventEmitter<CdkDragEnd>

Emits when the user stops dragging an item in the container.
@Output('cdkDragEntered')

entered: EventEmitter<CdkDragEnter<any>>

Emits when the user has moved the item into a new container.
@Output('cdkDragExited')

exited: EventEmitter<CdkDragExit<any>>

Emits when the user removes the item its container by dragging it into another container.
@Output('cdkDragMoved')

moved: Observable<CdkDragMove<T>>

Emits as the user is dragging the item. Use with caution, because this event will fire for every pixel that the user has dragged.
@Output('cdkDragReleased')

released: EventEmitter<CdkDragRelease>

Emits when the user has released a drag item, before any animations have started.
@Output('cdkDragStarted')

started: EventEmitter<CdkDragStart>

Emits when the user starts dragging the item.

dropContainer: CdkDropList

Droppable container that the draggable is a part of.

element: ElementRef<HTMLElement>

Element that the draggable is attached to.
Methods
getPlaceholderElement

Returns the element that is being used as a placeholder while the current element is being dragged.
Returns
HTMLElement

getRootElement

Returns the root draggable element.
Returns
HTMLElement

reset

Resets a standalone drag item to its initial position.

Handle that can be used to drag and CdkDrag instance.

Selector: [cdkDragHandle]

Properties
Name Description
@Input('cdkDragHandleDisabled')

disabled: boolean

Whether starting to drag through this handle is disabled.

element: ElementRef<HTMLElement>

Element that will be used as a template for the preview of a CdkDrag when it is being dragged.

Selector: ng-template[cdkDragPreview]

Properties
Name Description
@Input()

data: T

Context data to be added to the preview template instance.

templateRef: TemplateRef<T>

Element that will be used as a template for the placeholder of a CdkDrag when it is being dragged. The placeholder is displayed in place of the element being dragged.

Selector: ng-template[cdkDragPlaceholder]

Properties
Name Description
@Input()

data: T

Context data to be added to the placeholder template instance.

templateRef: TemplateRef<T>

Object that can be used to configure the behavior of DragRef.

Properties
Name Description

dragStartThreshold: number

Minimum amount of pixels that the user should drag, before the CDK initiates a drag sequence.

pointerDirectionChangeThreshold: number

Amount the pixels the user should drag before the CDK considers them to have changed the drag direction.
Deprecated
Deprecated
Properties
Name Description

_draggables: QueryList<CdkDrag>

data: T

Arbitrary data to attach to all events emitted by this container.

disabled: boolean

Whether starting a dragging sequence from this container is disabled.

element: ElementRef<HTMLElement>

DOM node that corresponds to the drop container.

id: string

Unique ID for the drop zone.

lockAxis: 'x' | 'y'

Locks the position of the draggable elements inside the container along the specified axis.

orientation: 'horizontal' | 'vertical'

Direction in which the list is oriented.
Methods
_getSiblingContainerFromPosition
Parameters

item

CdkDrag<any>

x

number

y

number

Returns
CdkDropListContainer | null

_isOverContainer
Parameters

x

number

y

number

Returns
boolean

_sortItem
Parameters

item

CdkDrag<any>

pointerX

number

pointerY

number

delta

{ x

drop

Drops an item into this container.
Parameters

item

CdkDrag<any>

Item being dropped into the container.

currentIndex

number

Index at which the item should be inserted.

previousContainer

Partial<CdkDropListContainer<any>>

Container from which the item got dragged in.

isPointerOverContainer

boolean

Whether the user's pointer was over the container when the item was dropped.
enter

Emits an event to indicate that the user moved an item into the container.
Parameters

item

CdkDrag<any>

Item that was moved into the container.

pointerX

number

Position of the item along the X axis.

pointerY

number

Position of the item along the Y axis.
exit

Removes an item from the container after it was dragged into another container by the user.
Parameters

item

CdkDrag<any>

Item that was dragged out.
getItemIndex

Figures out the index of an item in the container.
Parameters

item

CdkDrag<any>

Item whose index should be determined.
Returns
number

start

Starts dragging an item.

Event emitted when the user starts dragging a draggable.

Properties
Name Description

source: CdkDrag<T>

Draggable that emitted the event.

Event emitted when the user releases an item, before any animations have started.

Properties
Name Description

source: CdkDrag<T>

Draggable that emitted the event.

Event emitted when the user stops dragging a draggable.

Properties
Name Description

source: CdkDrag<T>

Draggable that emitted the event.

Event emitted when the user moves an item into a new drop container.

Properties
Name Description

container: CdkDropList<T>

Container into which the user has moved the item.

item: CdkDrag<I>

Item that was removed from the container.

Event emitted when the user removes an item from a drop container by moving it into another one.

Properties
Name Description

container: CdkDropList<T>

Container from which the user has a removed an item.

item: CdkDrag<I>

Item that was removed from the container.

Event emitted when the user drops a draggable item inside a drop container.

Properties
Name Description

container: CdkDropList<T>

Container in which the item was dropped.

currentIndex: number

Current index of the item.

isPointerOverContainer: boolean

Whether the user's pointer was over the container when the item was dropped.

item: CdkDrag

Item that is being dropped.

previousContainer: CdkDropList<O>

Container from which the item was picked up. Can be the same as the container.

previousIndex: number

Index of the item when it was picked up.

Event emitted as the user is dragging a draggable item.

Properties
Name Description

delta: { x: -1 | 0 | 1; y: -1 | 0 | 1; }

Indicates the direction in which the user is dragging the element along each axis. 1 means that the position is increasing (e.g. the user is moving to the right or downwards), whereas -1 means that it's decreasing (they're moving to the left or upwards). 0 means that the position hasn't changed.

event: MouseEvent | TouchEvent

Native event that is causing the dragging.

pointerPosition: { x: number; y: number; }

Position of the user's pointer on the page.

source: CdkDrag<T>

Item that is being dragged.

Event emitted when the user swaps the position of two drag items.

Properties
Name Description

container: CdkDropList<T>

Container that the item belongs to.

currentIndex: number

Index that the item is currently in.

item: CdkDrag<I>

Item that is being sorted.

previousIndex: number

Index from which the item was sorted previously.
moveItemInArray

Moves an item one index in an array to another.
Parameters

array

T[]

Array in which to move the item.

fromIndex

number

Starting index of the item.

toIndex

number

Index to which the item should be moved.
transferArrayItem

Moves an item from one array to another.
Parameters

currentArray

T[]

Array from which to transfer the item.

targetArray

T[]

Array into which to put the item.

currentIndex

number

Index of the item in its current array.

targetIndex

number

Index at which to insert the item.
copyArrayItem

Copies an item from one array to another, leaving it in its original position in current array.
Parameters

currentArray

T[]

Array from which to copy the item.

targetArray

T[]

Array into which is copy the item.

currentIndex

number

Index of the item in its current array.

targetIndex

number

Index at which to insert the item.

Injection token that is used to provide a CdkDropList instance to CdkDrag. Used for avoiding circular imports.

const CDK_DROP_LIST: InjectionToken<CdkDropListContainer<any>>;
Deprecated

Injection token that is used to provide a CdkDropList instance to CdkDrag. Used for avoiding circular imports.

const CDK_DROP_LIST_CONTAINER: InjectionToken<CdkDropListContainer<any>>;

Injection token that can be used to configure the behavior of CdkDrag.

const CDK_DRAG_CONFIG: InjectionToken<DragRefConfig>;