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.

Change Theme

Theme

Loading ...

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.

Suggested Links

• API Reference of the DropTargetContainerDirective