CdkDropList
Container that wraps a set of draggable items.
constructor
CdkDropList<T>
unknown[]
CdkDropList
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
removeItem
void
getSortedItems
CdkDrag<any>[]
Gets the registered items in the list, sorted by their position in the DOM.
CdkDrag<any>[]
ngOnDestroy
void
void