> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/clauderic/dnd-kit/llms.txt
> Use this file to discover all available pages before exploring further.
# @dnd-kit/abstract
> Framework-agnostic core API for building drag and drop interfaces
`@dnd-kit/abstract` is the foundational package of dnd-kit that provides a framework-agnostic implementation of drag and drop functionality. It can be used to build drag and drop interfaces in any JavaScript environment.
## Overview
The abstract package provides the core primitives and APIs for:
* **Drag and Drop Management**: Centralized orchestration of drag operations
* **Entities**: Draggable and Droppable primitives for defining interactive elements
* **Sensors**: Pluggable input handlers for mouse, touch, keyboard, and custom interactions
* **Modifiers**: Transform drag behavior with constraints, snapping, and custom logic
* **Plugins**: Extend functionality with reusable, composable behaviors
* **Collision Detection**: Flexible algorithms for determining drop targets
* **Event System**: Comprehensive event lifecycle hooks
## Installation
```bash theme={null}
npm install @dnd-kit/abstract
```
## Core Exports
### Manager
Central orchestrator for all drag and drop operations
### Entities
Entities that can be dragged
Entities that can receive draggables
### Extensibility
Input handlers for drag interactions
Transform drag behavior
Extend drag and drop functionality
## Type Definitions
### UniqueIdentifier
Type representing a unique identifier for entities.
```typescript theme={null}
type UniqueIdentifier = string | number;
```
### Data
Type representing arbitrary data associated with an entity.
```typescript theme={null}
type Data = Record;
```
### Type
Type representing the type/category of an entity.
```typescript theme={null}
type Type = Symbol | string | number;
```
Used to categorize entities and implement type-based filtering or matching between draggables and droppables.
## Event System
The abstract package provides a comprehensive event system for monitoring drag and drop operations:
### Event Types
Fired when collisions are detected between draggables and droppables.
```typescript theme={null}
type CollisionEvent = Preventable<{
collisions: Collisions;
}>;
```
Fired before a drag operation starts. Can be prevented.
```typescript theme={null}
type BeforeDragStartEvent = Preventable<{
operation: DragOperationSnapshot;
nativeEvent?: Event;
}>;
```
Fired when a drag operation starts.
```typescript theme={null}
type DragStartEvent = {
operation: DragOperationSnapshot;
nativeEvent?: Event;
cancelable: false;
};
```
Fired when the dragged entity moves.
```typescript theme={null}
type DragMoveEvent = Preventable<{
operation: DragOperationSnapshot;
to?: Coordinates;
by?: Coordinates;
nativeEvent?: Event;
}>;
```
Fired when a draggable hovers over a droppable.
```typescript theme={null}
type DragOverEvent = Preventable<{
operation: DragOperationSnapshot;
}>;
```
Fired when a drag operation ends.
```typescript theme={null}
type DragEndEvent = {
operation: DragOperationSnapshot;
nativeEvent?: Event;
canceled: boolean;
suspend(): {resume(): void; abort(): void};
};
```
### Using Events
```typescript theme={null}
const manager = new DragDropManager();
// Listen to drag start
manager.monitor.addEventListener('dragstart', (event, manager) => {
console.log('Drag started:', event.operation.source);
});
// Prevent drag move
manager.monitor.addEventListener('dragmove', (event) => {
if (someCondition) {
event.preventDefault();
}
});
// Handle drag end with suspension
manager.monitor.addEventListener('dragend', (event) => {
if (event.canceled) {
console.log('Drag was canceled');
} else {
// Suspend the operation for async cleanup
const {resume, abort} = event.suspend();
performAsyncCleanup()
.then(resume)
.catch(abort);
}
});
```
## Collision Detection
The package provides utilities for collision detection:
### CollisionPriority
Priority levels for collision detection.
```typescript theme={null}
enum CollisionPriority {
Lowest,
Low,
Normal,
High,
Highest,
}
```
### CollisionType
Types of collision detection.
```typescript theme={null}
enum CollisionType {
Collision,
ShapeIntersection,
PointerIntersection,
}
```
### Collision Interface
```typescript theme={null}
interface Collision {
id: UniqueIdentifier; // Droppable identifier
priority: CollisionPriority | number;
type: CollisionType;
value: number; // Collision strength
data?: Record; // Additional data
}
```
### CollisionDetector
Function type for custom collision detection.
```typescript theme={null}
type CollisionDetector = (
input: CollisionDetectorInput
) => Collision | null;
interface CollisionDetectorInput {
droppable: U;
dragOperation: DragOperation;
}
```
### sortCollisions
Utility function to sort collisions by priority and value.
```typescript theme={null}
function sortCollisions(collisions: Collisions): Collisions
```
## Customizable Type
Many configuration options accept a `Customizable` type that allows either a direct value or a function that receives defaults:
```typescript theme={null}
type Customizable = T | ((defaults: T) => T);
```
### Examples
```typescript theme={null}
// Direct value (replaces defaults)
const manager = new DragDropManager({
plugins: [MyPlugin]
});
// Function (receives and extends defaults)
const manager = new DragDropManager({
plugins: (defaults) => [...defaults, MyPlugin]
});
```
### resolveCustomizable
Utility function to resolve customizable values:
```typescript theme={null}
function resolveCustomizable(
value: Customizable | undefined,
defaults: T
): T
```
## Renderer
Type for handling visual rendering of drag operations.
```typescript theme={null}
type Renderer = {
rendering: Promise;
};
```
The renderer's `rendering` promise resolves when the current render cycle is complete, allowing for coordination between drag operations and visual updates.
## Architecture
The abstract package follows a plugin-based architecture:
```mermaid theme={null}
graph TB
A[DragDropManager] --> B[Registry]
A --> C[Monitor]
A --> D[Actions]
A --> E[DragOperation]
A --> F[CollisionObserver]
B --> G[Draggables]
B --> H[Droppables]
B --> I[Sensors]
B --> J[Modifiers]
B --> K[Plugins]
C --> L[Event Listeners]
D --> M[start]
D --> N[move]
D --> O[stop]
D --> P[setDragSource]
D --> Q[setDropTarget]
```
## Next Steps
Learn about the central manager API
Create draggable entities
Create droppable entities
Implement input handlers