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