@angular/cdk/drag-drop

DragRef

Class

Reference to a draggable item. Used to manipulate or dispose of the item.

API

  
    class DragRef<T = any> {}

constructor

DragRef<T>

@paramelementany

@param_configDragRefConfig

@param_documentDocument

@param_ngZoneNgZone

@param_viewportRulerViewportRuler

@param_dragDropRegistryDragDropRegistry<unknown, unknown>

@param_rendererRenderer2

@returnsDragRef<T>

lockAxis

"x" | "y"

Axis along which dragging is locked.

dragStartDelay

number | { touch: number; mouse: number; }

Amount of milliseconds to wait after the user has put their pointer down before starting to drag the element.

previewClass

string | string[] | undefined

Class to be added to the preview element.

scale

number

If the parent of the dragged element has a scale transform, it can throw off the positioning when the user starts dragging. Use this input to notify the CDK of the scale.

disabled

boolean

Whether starting to drag this element is disabled.

disabled

boolean

beforeStarted

any

Emits as the drag sequence is being prepared.

started

any

Emits when the user starts dragging the item.

released

any

Emits when the user has released a drag item, before any animations have started.

ended

any

Emits when the user stops dragging an item in the container.

entered

any

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

exited

any

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

dropped

any

Emits when the user drops the item inside a container.

moved

Observable<{ source: DragRef<any>; pointerPosition: { x: number; y: number; }; event: MouseEvent | TouchEvent; distance: Point; delta: { x: 0 | 1 | -1; y: 0 | 1 | -1; }; }>

Emits as the user is dragging the item. Use with caution, because this event will fire for every pixel that the user has dragged.

data

T

Arbitrary data that can be attached to the drag item.

constrainPosition

((userPointerPosition: Point, dragRef: DragRef<any>, dimensions: DOMRect, pickupPositionInElement: Point) => Point) | undefined

Function that can be used to customize the logic of how the position of the drag item is limited while it's being dragged. Gets called with a point containing the current position of the user's pointer on the page, a reference to the item being dragged and its dimensions. Should return a point describing where the item should be rendered.

getPlaceholderElement

HTMLElement

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

@returnsHTMLElement

getRootElement

HTMLElement

Returns the root draggable element.

@returnsHTMLElement

getVisibleElement

HTMLElement

Gets the currently-visible element that represents the drag item. While dragging this is the placeholder, otherwise it's the root element.

@returnsHTMLElement

withHandles

this

Registers the handles that can be used to drag the element.

@paramhandlesany[]

@returnsthis

withPreviewTemplate

this

Registers the template that should be used for the drag preview.

@paramtemplateDragPreviewTemplate<any> | null

Template that from which to stamp out the preview.

@returnsthis

withPlaceholderTemplate

this

Registers the template that should be used for the drag placeholder.

@paramtemplateDragHelperTemplate<any> | null

Template that from which to stamp out the placeholder.

@returnsthis

withRootElement

this

Sets an alternate drag root element. The root element is the element that will be moved as the user is dragging. Passing an alternate root element is useful when trying to enable dragging on an element that you might not have access to.

@paramrootElementany

@returnsthis

withBoundaryElement

this

Element to which the draggable's position will be constrained.

@paramboundaryElementany

@returnsthis

withParent

this

Sets the parent ref that the ref is nested in.

@paramparentDragRef<unknown> | null

@returnsthis

dispose

void

Removes the dragging functionality from the DOM element.

@returnsvoid

isDragging

boolean

Checks whether the element is currently being dragged.

@returnsboolean

reset

void

Resets a standalone drag item to its initial position.

@returnsvoid

disableHandle

void

Sets a handle as disabled. While a handle is disabled, it'll capture and interrupt dragging.

@paramhandleHTMLElement

Handle element that should be disabled.

@returnsvoid

enableHandle

void

Enables a handle, if it has been disabled.

@paramhandleHTMLElement

Handle element to be enabled.

@returnsvoid

withDirection

this

Sets the layout direction of the draggable item.

@paramdirectionDirection

@returnsthis

getFreeDragPosition

Readonly<Point>

Gets the current position in pixels the draggable outside of a drop container.

@returnsReadonly<Point>

setFreeDragPosition

this

Sets the current position in pixels the draggable outside of a drop container.

@paramvaluePoint

New position to be set.

@returnsthis

withPreviewContainer

this

Sets the container into which to insert the preview element.

@paramvalueany

Container into which to insert the preview.

@returnsthis