Drop Target Container
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:
- Apply the
DropTargetContainerdirective to the container element.
- Set the
dropTargetFilterproperty and pass a
stringselector for the elements within the container, which will be configured as drop targets.
The following example demonstrates the approach in action.
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.