• Overview
@angular/cdk/drag-drop

CdkDropList

Class

Container that wraps a set of draggable items.

API

  
    class CdkDropList<T = any> implements OnDestroy {}
  
  

constructor

CdkDropList<T>
@paramargsunknown[]
@returnsCdkDropList

element

any

connectedTo

string | CdkDropList<any> | (string | CdkDropList<any>)[]

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.

data

T

Arbitrary data to attach to this container.

orientation

DropListOrientation

Direction in which the list is oriented.

id

string

Unique ID for the drop zone. Can be used as a reference in the connectedTo of another CdkDropList.

lockAxis

DragAxis

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

disabled

boolean

Whether starting a dragging sequence from this container is disabled.

disabled

boolean

sortingDisabled

boolean

Whether sorting within this drop list is disabled.

enterPredicate

(drag: CdkDrag<any>, drop: CdkDropList<any>) => boolean

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

sortPredicate

(index: number, drag: CdkDrag<any>, drop: CdkDropList<any>) => boolean

Functions that is used to determine whether an item can be sorted into a particular index.

autoScrollDisabled

boolean

Whether to auto-scroll the view when the user moves their pointer close to the edges.

autoScrollStep

NumberInput

Number of pixels to scroll for each frame when auto-scrolling an element.

elementContainerSelector

string | null

Selector that will be used to resolve an alternate element container for the drop list. Passing an alternate container is useful for the cases where one might not have control over the parent node of the draggable items within the list (e.g. due to content projection). This allows for usages like:

          
<div cdkDropList cdkDropListElementContainer=".inner">  <div class="inner">    <div cdkDrag></div>  </div></div>

dropped

EventEmitter<CdkDragDrop<T, any, any>>

Emits when the user drops an item inside the container.

entered

EventEmitter<CdkDragEnter<T, T>>

Emits when the user has moved a new drag item into this container.

exited

EventEmitter<CdkDragExit<T, T>>

Emits when the user removes an item from the container by dragging it into another container.

sorted

EventEmitter<CdkDragSortEvent<T, T>>

Emits as the user is swapping items while actively dragging.

addItem

void

Registers an items with the drop list.

@paramitemCdkDrag<any>
@returnsvoid

removeItem

void

Removes an item from the drop list.

@paramitemCdkDrag<any>
@returnsvoid

getSortedItems

CdkDrag<any>[]

Gets the registered items in the list, sorted by their position in the DOM.

@returnsCdkDrag<any>[]

ngOnDestroy

void
@returnsvoid
Jump to details