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

Drag Target Container

The DragTargetContainer directive is an extended DragTarget directive. It enables you to configure multiple elements within а container as drag targets. Thе directive is also suitable for scenarios in which the drag target elements are not directly accessible in the template.

To configure multiple elements within a container as drag targets, follow the steps listed below:

  1. Apply the DragTargetContainer directive to the container element.
  2. Set the dragTargetFilter property and pass a string selector for the elements within the container, which will be configured as draggable targets.

The following example demonstrates the approach in action.

View Source
Change Theme:


The DragTargetContainer directive emits a number of events for each of its drag targets upon user interaction:

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

In this article

Not finding the help you need?