DragDropManager is the core class that orchestrates all drag and drop operations. It manages entities, coordinates sensors and modifiers, handles collision detection, and dispatches events throughout the drag lifecycle.Constructor Creates a new drag and drop manager instance.
const manager = new DragDropManager < T , U >( config ? );
config
DragDropManagerInput<T, U>
Configuration object for the manager. Show DragDropManagerInput properties
Array of plugin constructors or descriptors to extend functionality.
Can be a direct array or a function that receives default plugins. // Direct array (replaces defaults) plugins : [ MyPlugin , AnotherPlugin ] // Function (extends defaults) plugins : ( defaults ) => [ ... defaults , MyPlugin ]
Array of sensor constructors or descriptors for handling input.
Can be a direct array or a function that receives default sensors. sensors : [ PointerSensor , KeyboardSensor ]
modifiers
Customizable<Modifiers<T>>
Array of modifier constructors or descriptors for transforming drag behavior.
Can be a direct array or a function that receives default modifiers. modifiers : [ SnapModifier , RestrictToWindowModifier ]
Custom renderer for handling visual updates during drag operations. renderer : { rendering : Promise . resolve () }
Type parameter for draggable entities.
Type parameter for droppable entities.
Properties actions actions
DragActions<T, U, DragDropManager<T, U>>
Actions that can be performed during drag operations.
start(args) - Start a new drag operationmove(args) - Move the dragged entitystop(args) - Stop the current drag operationsetDragSource(source) - Set the drag sourcesetDropTarget(identifier) - Set the drop target See DragActions for detailed action methods.
collisionObserver Observes and manages collision detection between draggable and droppable entities.
dragOperation Tracks the current drag operation state and metadata. Show DragOperation properties
source - The draggable being draggedtarget - The droppable being targetedstatus - Current operation statusposition - Current position with historytransform - Current transform coordinatesshape - Current shape with historyactivatorEvent - Event that initiated the dragcanceled - Whether the operation was canceledmodifiers - Active modifiers monitor monitor
DragDropMonitor<T, U, DragDropManager<T, U>>
Monitors and emits drag and drop events. manager . monitor . addEventListener ( 'dragstart' , ( event , manager ) => { console . log ( 'Started dragging:' , event . operation . source ); });
registry registry
DragDropRegistry<T, U, DragDropManager<T, U>>
Registry that manages draggable and droppable entities, as well as sensors, modifiers, and plugins.
renderer Handles rendering of drag and drop visual feedback.
plugins Gets or sets the list of active plugins. // Get active plugins const activePlugins = manager . plugins ; // Set plugins manager . plugins = [ NewPlugin , AnotherPlugin ];
modifiers Gets or sets the list of active modifiers. // Get active modifiers const activeModifiers = manager . modifiers ; // Set modifiers manager . modifiers = [ SnapModifier ];
sensors Gets or sets the list of active sensors. // Get active sensors const activeSensors = manager . sensors ; // Set sensors manager . sensors = [ PointerSensor , KeyboardSensor ];
Methods destroy() Cleans up resources and stops any active drag operations.
This method:
Stops any active drag operation (marking it as canceled)
Destroys all active modifiers
Unregisters all entities
Cleans up the collision observer
DragActions The actions property provides methods for controlling drag operations:
start() Starts a new drag operation.
const controller = manager . actions . start ({ source: draggableId , coordinates: { x: 0 , y: 0 }, event: mouseEvent });
Configuration for the drag operation. The source draggable entity or its identifier. If not provided, must be set via setDragSource first.
The initial coordinates of the drag operation. The native event that initiated the drag (e.g., mousedown, touchstart).
An AbortController that can be used to cancel the drag operation.
Throws:
Error if no drag source is setError if another operation is already active
Events dispatched:
beforedragstart (preventable) - Before initializationdragstart - After initialization completes
move() Moves the dragged entity to a new position.
manager . actions . move ({ by: { x: 10 , y: 5 }, event: mouseMoveEvent });
Configuration for the move operation. Relative coordinates to move by. by : { x : 10 , y : 5 } // Move 10px right, 5px down
Absolute coordinates to move to. to : { x : 100 , y : 200 } // Move to position (100, 200)
The native event that triggered the move.
Whether the move can be prevented via event.preventDefault().
Whether to dispatch dragmove events.
Note: Only one of by or to should be provided.Events dispatched:
dragmove (preventable if cancelable is true)
stop() Stops the current drag operation.
manager . actions . stop ({ canceled: false , event: mouseUpEvent });
Configuration for stopping the operation. The native event that triggered the stop.
Whether the operation was canceled (as opposed to completed successfully).
Events dispatched:
dragend - With suspend() method for async cleanup
setDragSource() Sets the source of the drag operation.
manager . actions . setDragSource ( draggable ); // or manager . actions . setDragSource ( 'draggable-id' );
source
T | UniqueIdentifier
required
The draggable entity or its unique identifier.
setDropTarget() Sets the target of the drop operation.
const prevented = await manager . actions . setDropTarget ( droppableId );
identifier
UniqueIdentifier | null | undefined
required
The unique identifier of the droppable entity, or null/undefined to clear the target.
A promise that resolves to true if the dragover event was prevented.
Events dispatched:
dragover (preventable) - If status is dragging
Usage Examples Basic Setup import { DragDropManager , Draggable , Droppable } from '@dnd-kit/abstract' ; const manager = new DragDropManager (); // Create draggable const draggable = new Draggable ( { id: 'item-1' , data: { label: 'Drag me' } }, manager ); // Create droppable const droppable = new Droppable ( { id: 'zone-1' , collisionDetector: myCollisionDetector }, manager );
With Plugins and Sensors import { DragDropManager } from '@dnd-kit/abstract' ; import { PointerSensor } from '@dnd-kit/dom/sensors' ; import { SnapModifier } from '@dnd-kit/abstract/modifiers' ; const manager = new DragDropManager ({ sensors: [ PointerSensor ], modifiers: [ SnapModifier . configure ({ gridSize: 20 })], plugins : ( defaults ) => [ ... defaults , MyCustomPlugin ] });
Event Handling const manager = new DragDropManager (); // Prevent drag start conditionally manager . monitor . addEventListener ( 'beforedragstart' , ( event ) => { if ( ! canDrag ( event . operation . source )) { event . preventDefault (); } }); // Track drag progress manager . monitor . addEventListener ( 'dragmove' , ( event ) => { console . log ( 'Dragging to:' , event . operation . position . current ); }); // Handle drop manager . monitor . addEventListener ( 'dragend' , ( event ) => { if ( ! event . canceled && event . operation . target ) { const { source , target } = event . operation ; console . log ( `Dropped ${ source ?. id } onto ${ target ?. id } ` ); } });
Manual Drag Control const manager = new DragDropManager (); // Start drag programmatically const controller = manager . actions . start ({ source: 'item-1' , coordinates: { x: 0 , y: 0 } }); // Move the drag manager . actions . move ({ to: { x: 100 , y: 50 } }); // Cancel the drag controller . abort (); // or manager . actions . stop ({ canceled: true });
Cleanup const manager = new DragDropManager (); // Use the manager... // Clean up when done manager . destroy ();
Type Inference You can infer draggable and droppable types from a manager:
import type { InferDraggable , InferDroppable } from '@dnd-kit/abstract' ; type MyDraggable = InferDraggable < typeof manager >; type MyDroppable = InferDroppable < typeof manager >;
See Also