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

Drop Target Container

The DropTargetContainer directive is an extended DropTarget directive. It enables you to configure multiple elements within a container as drop targets. This directive is also suitable for scenarios in which the drop target elements are not accessible in the template.

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

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

The following example demonstrates the approach in action.

Example
View Source
Change Theme:

Events

The DropTargetContainer directive emits a number of events when a valid drag target interacts with any of its drop targets:

  • onDragEnter—Fires when a valid drag target enters a drop target.
  • onDragOver—Fires while a valid drag target is being dragged over a drop target.
  • onDragLeave—Fires when a valid drag target leaves a drop target.
  • onDrop—Fires when a valid drag target is dropped over a drop target.

In this article

Not finding the help you need?