Manual Drag
In complex scenarios you could take full control over the DragTarget directive behavior by setting its mode option to manual. In this case the built-in internal logic for moving the element will not be executed. Adding custom logic, styles and positioning is completely in the hands of the developer and is achieved by handling the corresponding DragTarget events.
Dragging between Scrollable Containers
By default, when the DragTarget is nested inside a scrollable container, its movement is restricted within the parent boundaries. To override this behavior, you could manually handle the drag action and apply the needed styling and positioning.
The following example demonstrates this approach by applying position: fixed to the target element.
Setup
To calculate the DragTarget position correctly when position: fixed is set, you have to retrieve the current pointer coordinates in the drag event handler. Follow the steps listed below, to achieve the above setup:
-
Set the
modeproperty tomanualin order to take full control over the drag action. -
Handle the
onDragStartevent to get the current DragTarget HTML element. Use this event to update the element position tofixed.
public handleDragStart(ev: DragTargetDragStartEvent): void {
this.dragIndex = ev.dragTargetId;
this.dragTarget = ev.dragTarget;
this.renderer.setStyle(this.dragTarget, 'position', 'fixed');
}- Handle the
onDragevent to get the position of the DragTarget and to apply theleftandtopstyles to the element.
public handleDrag(ev: DragTargetDragEvent): void {
const position = {
x: ev.dragEvent.clientX,
y: ev.dragEvent.clientY
};
this.renderer.setStyle(this.dragTarget, 'left', `${position.x}px`);
this.renderer.setStyle(this.dragTarget, 'top', `${position.y}px`);
}- Handle the
onReleaseevent to remove thefixedposition. This is recommend in order to prevent unwanted behavior.
public handleRelease(ev): void {
this.dragTarget && this.renderer.removeStyle(this.dragTarget, 'position');
}