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

Drag Target

Place the DragTarget directive on an HTML element or an Angular component to configure it as a draggable item.

The following example demonstrates the DragTarget directive in action.

Example
View Source
Change Theme:

Setup

The drag logic depends on where the drag target is rendered:

  • Inside a valid drop target—the drag target can be dropped only inside a new valid drop target (an element with the DropTarget directive applied). When the element is dropped in the same drop target or outside of a valid one, the item returns to its initial position (see example).
  • Outside of a valid drop target—the element remains where it was dropped (see example).

Changing the position of the drag target is achieved by applying custom styling internally utilizing the transform CSS property and its translate function. The function accepts x and y coordinates which define the position of the element by the horizontal and vertical axis. The coordinates are retrieved based on internal calculations for which the NormalizedDragEvent attributes are used. When the drag target is rendered inside a valid drop target and is dropped inside the same drop target or outside of a valid one, the transform style is removed and a transition is applied so that the element returns to its initial position.

The drag target enables you to define one or more of its child elements as drag handles by utilizing the DragHandle directive. When at least one drag handle is provided, the drag target can be dragged only through its handle (see example).

Upon dropping the drag target, the developer should ensure that the template is updated correspondingly. Due to the specifics of the Angular framework and its template engine, once change detection runs, the template will be re-rendered and if not updated, any changes applied through the UI will be discarded. When dragging items within data-bound components, use the drag-and-drop-specific events to update the respective data collection so that the items are re-rendered in accordance with the user interaction.

You can entirely customize the logic that will be executed upon dragging by handling the following DragTarget events:

  • press—Fires when the drag target is pressed.
  • release—Fires when the drag target is released after being pressed.
  • dragReady—Fires when the DragTarget's dragDelay has passed and the user is able to drag the element.
  • dragStart—Fires when the dragging of the element begins.
  • drag—Fires while the element is being dragged.
  • dragEnd—Fires when the dragging of the element ends and the user releases it.

In this article

Not finding the help you need?