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

DragTargetDirective

Updated on Feb 5, 2026

Represents the Kendo UI DragTarget directive for Angular. Use this directive to make an element draggable.

Selector

[kendoDragTarget]

Accessible in templates as #kendoDragTargetInstance="kendoDragTarget"

Name	Type	Default	Description
autoScroll	`boolean \| AutoScrollOptions`	`true`	Sets the automatic container scrolling behavior when close to the edge. See example.
cursorStyle	`string`	`'move'`	Sets 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 drag target. The data is 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`	Sets the delay in milliseconds before dragging begins. See example.
dragTargetId	`string \| DragTargetIdFn`		Sets a unique identifier for the drag target.
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 to use the default dragging behavior or handle it manually.
restrictByAxis	`DragAxis`		Restricts dragging to horizontal or vertical only. Applies when `mode` is `auto`. See example.
threshold	`number`	`0`	Sets the number of pixels the pointer must move before dragging starts. Applies when `manualDrag` is `false`. See example.

Name	Type	Description
onDrag	`EventEmitter<DragTargetDragEvent>`	Fires while the user drags the drag target element.
onDragEnd	`EventEmitter<DragTargetDragEndEvent>`	Fires when dragging of the drag target ends and the element is released.
onDragReady	`EventEmitter<DragTargetDragReadyEvent>`	Fires when the drag target's `dragDelay` has passed and the user can drag the element.
onDragStart	`EventEmitter<DragTargetDragStartEvent>`	Fires when dragging of the drag target element begins.
onPress	`EventEmitter<DragTargetPressEvent>`	Fires when the user presses the drag target element.
onRelease	`EventEmitter<DragTargetReleaseEvent>`	Fires when `DragTarget` is released, either by dropping it on a drop target or by releasing the mouse button.