@angular/cdk/drag-drop

DropListRef

Class

Reference to a drop list. Used to manipulate or dispose of the container.

API

  
    class DropListRef<T = any> {}

constructor

DropListRef<T>

@paramelementany

@param_dragDropRegistryDragDropRegistry<unknown, unknown>

@param_documentany

@param_ngZoneNgZone

@param_viewportRulerViewportRuler

@returnsDropListRef<T>

element

any

Element that the drop list is attached to.

disabled

boolean

Whether starting a dragging sequence from this container is disabled.

sortingDisabled

boolean

Whether sorting items within the list is disabled.

lockAxis

"x" | "y"

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

autoScrollDisabled

boolean

Whether auto-scrolling the view when the user moves their pointer close to the edges is disabled.

autoScrollStep

number

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

enterPredicate

(drag: DragRef<any>, drop: DropListRef<any>) => boolean

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

sortPredicate

(index: number, drag: DragRef<any>, drop: DropListRef<any>) => boolean

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

beforeStarted

any

Emits right before dragging has started.

entered

any

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

exited

any

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

dropped

any

Emits when the user drops an item inside the container.

sorted

any

Emits as the user is swapping items while actively dragging.

receivingStarted

any

Emits when a dragging sequence is started in a list connected to the current one.

receivingStopped

any

Emits when a dragging sequence is stopped from a list connected to the current one.

data

T

Arbitrary data that can be attached to the drop list.

dispose

void

Removes the drop list functionality from the DOM element.

@returnsvoid

isDragging

boolean

Whether an item from this list is currently being dragged.

@returnsboolean

start

void

Starts dragging an item.

@returnsvoid

enter

void

Attempts to move an item into the container.

@paramitemDragRef<any>

Item that was moved into the container.

@parampointerXnumber

Position of the item along the X axis.

@parampointerYnumber

Position of the item along the Y axis.

@paramindexnumber | undefined

Index at which the item entered. If omitted, the container will try to figure it out automatically.

@returnsvoid

exit

void

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

@paramitemDragRef<any>

Item that was dragged out.

@returnsvoid

drop

void

Drops an item into this container.

@paramitemDragRef<any>

Item being dropped into the container.

@paramcurrentIndexnumber

Index at which the item should be inserted.

@parampreviousIndexnumber

Index of the item when dragging started.

@parampreviousContainerDropListRef<any>

Container from which the item got dragged in.

@paramisPointerOverContainerboolean

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

@paramdistancePoint

Distance the user has dragged since the start of the dragging sequence.

@paramdropPointPoint

@parameventMouseEvent | TouchEvent

Event that triggered the dropping sequence.

@returnsvoid

withItems

this

Sets the draggable items that are a part of this list.

@paramitemsDragRef<any>[]

Items that are a part of this list.

@returnsthis

withDirection

this

Sets the layout direction of the drop list.

@paramdirectionDirection

@returnsthis

connectedTo

this

Sets the containers that are connected to this one. When two or more containers are connected, the user will be allowed to transfer items between them.

@paramconnectedToDropListRef<any>[]

Other containers that the current containers should be connected to.

@returnsthis

withOrientation

this

Sets the orientation of the container.

@paramorientationDropListOrientation

New orientation for the container.

@returnsthis

withScrollableParents

this

Sets which parent elements are can be scrolled while the user is dragging.

@paramelementsHTMLElement[]

Elements that can be scrolled.

@returnsthis

withElementContainer

this

Configures the drop list so that a different element is used as the container for the dragged items. This is useful for the cases when one might not have control over the full DOM that sets up the dragging. Note that the alternate container needs to be a descendant of the drop list.

@paramcontainerHTMLElement

New element container to be assigned.

@returnsthis

getScrollableParents

readonly HTMLElement[]

Gets the scrollable parents that are registered with this drop container.

@returnsreadonly HTMLElement[]

getItemIndex

number

Figures out the index of an item in the container.

@paramitemDragRef<any>

Item whose index should be determined.

@returnsnumber

isReceiving

boolean

Whether the list is able to receive the item that is currently being dragged inside a connected drop list.

@returnsboolean