repository·main·Indexed 12 days ago
https://github.com/clauderic/dnd-kitA modern, lightweight, and performant toolkit for building accessible drag and drop interfaces for the web. It is framework-agnostic at its core and provides specialized adapters for React, Vue, Svelte, and SolidJS, as well as a vanilla DOM implementation via @dnd-kit/dom.
The @dnd-kit/abstract package provides the core abstractions and utilities for implementing drag and drop functionality. It serves as the foundation for building concrete implementation layers (such as @dnd-kit/dom).
Note: This package is not intended for most end-users. You should only use it if you are planning to build a new concrete implementation layer on top of @dnd-kit.
DragDropManager is the central orchestrator of the dnd-kit system. It coordinates all interactions between draggable and droppable elements by managing the registry, sensors, plugins, and modifiers. It acts as the bridge between input detection (Sensors), logic extension (Plugins), and behavior customization (Modifiers).DragDropProvider acts as a context provider for the drag and drop lifecycle. It manages a DragDropManager which orchestrates the interactions between sensors, plugins, and modifiers. By wrapping your application (or a specific section of it) in DragDropProvider, you ensure that all child components can access the shared drag and drop state and logic via Vue's dependency injection.The @dnd-kit/abstract architecture is built around several key abstractions that manage the lifecycle of a drag-and-drop interaction:
When creating sortable items that belong to different lists, use the group property in the useSortable hook. This enables the items to be recognized as part of the same sortable ecosystem across different containers.
To handle dropping items into empty columns, the column container must implement the useDroppable hook. This ensures the column acts as a valid drop target even when it contains no sortable items.
The DragDropProvider component is the central context provider for drag and drop interactions. It wraps your draggable and droppable elements and provides event listeners (like onDragEnd) to handle interaction logic.
Critical Requirement: createDraggable and createDroppable rely on the context provided by DragDropProvider. They must be called from a component that is rendered inside the DragDropProvider. If you call them in the same component that renders the provider, the context will be unavailable and an error will be thrown.
<script>
import {DragDropProvider} from '@dnd-kit/svelte';
import Draggable from './Draggable.svelte';
import Droppable from './Droppable.svelte';
let parent = $state(undefined);
function onDragEnd(event) {
if (event.canceled) return;
parent = event.operation.target?.id;
}
</script>
<DragDropProvider {onDragEnd}>
{#if parent == null}
<Draggable />
{/if}
<Droppable id="droppable">
{#if parent === 'droppable'}
<Draggable />
{/if}
</Droppable>
</DragDropProvider>You can create multiple droppable areas in your application using two patterns:
useDroppable multiple times within a single component (ensuring each call uses a different id).useDroppable and render that component multiple times throughout your application. Each instance must be passed a unique id via props.Understanding the following abstractions is essential for using the @dnd-kit/dom layer:
Modifiers transform and constrain the movement of draggable elements during drag operations. They can restrict movement to specific axes (horizontal/vertical), constrain movement within boundaries (window/element), or implement custom logic like snapping to a grid.
Key behaviors:
Draggable element take precedence over global modifiers configured on the DragDropManager.apply() method is called during the drag operation to transform coordinates, and it can be destroyed to clean up resources.The DragDropManager follows a four-stage lifecycle:
destroy()).The AutoScroller plugin automatically scrolls scrollable containers when a pointer approaches their edges during a drag operation. It works by detecting the nearest scrollable ancestor of the element under the pointer and computing scroll direction and speed based on proximity to the edge. The scroll speed increases linearly as the pointer gets closer to the edge.
This plugin is included by default when creating a new DragDropManager.
By default, Sortable uses the OptimisticSortingPlugin. This plugin physically moves DOM elements during a drag to provide immediate visual feedback without waiting for framework re-renders.
Key behaviors during drag:
index and group properties on Sortable instances are updated.source and target of the drag operation refer to the same element. Consequently, isDragSource and isDropTarget will both be true for the dragged item.Tracking changes:
Because source and target are identical, you must use sortable-specific properties to track movement:
index: The current position (updated by the plugin).initialIndex: The position when the drag started.group: The current group.initialGroup: The group when the drag started.