Sample Applications

New to Kendo UI for Angular? Start a free 30-day trial

DragTargetDirective

Represents the Kendo UI DragTarget directive for Angular.

Selector

[kendoDragTarget]

Export Name

Accessible in templates as #kendoDragTargetInstance="kendoDragTarget"

Inputs

Name	Type	Default	Description
autoScroll	`boolean \| AutoScrollOptions`	`true`	Defines the automatic container scrolling behavior when close to the edge (see example).
cursorStyle	`string`	`'move'`	Specifies the cursor style of the drag target. Accepts same values as the CSS `cursor` property.
dragData	`DragTargetDataFn`		Defines a callback function used for attaching custom data to the dragTarget. The data will be available in the events of the respective `DropTarget` or `DropTargetContainer` directives. The current DragTarget HTML element and its `dragTargetId` will be available as arguments.
dragDelay	`number`	`0`	Defines the delay in milliseconds after which the drag will begin (see example).
dragTargetId	`string \| DragTargetIdFn`		Defines a unique identifier for the dragTarget.
hint	`boolean \| HintSettings`	`false`	Defines whether a hint will be used for dragging. By default, the hint is a copy of the drag target. (see example).
mode	`DragMode`	`'auto'`	Specifies whether the default dragging behavior will be performed or the developer will manually handle the drag action.
restrictByAxis	`DragAxis`		Restricts the element to be dragged horizontally or vertically only (see example). Applicable when `mode` is set to `auto`.
threshold	`number`	`0`	The number of pixels the pointer moves in any direction before the dragging starts (see example). Applicable when `manualDrag` is set to `false`.

Events

Name	Type	Description
onDrag	`EventEmitter<DragTargetDragEvent>`	Fires while the user drags the DragTarget element.
onDragEnd	`EventEmitter<DragTargetDragEndEvent>`	Fires when the dragging of the DragTarget ends and the element is released.
onDragReady	`EventEmitter<DragTargetDragReadyEvent>`	Fires when the DragTarget's `dragDelay` has passed and the user is able to drag the element.
onDragStart	`EventEmitter<DragTargetDragStartEvent>`	Fires when the dragging of the DragTarget element begins.
onPress	`EventEmitter<DragTargetPressEvent>`	Fires when the user presses the DragTarget element.
onRelease	`EventEmitter<DragTargetReleaseEvent>`	Fires when the user releases the DragTarget element after being pressed.

In this article

Selector Export Name Inputs Events

Not finding the help you need?

Contact Support