# @horuse/svelte-dnd

A drag-and-drop library for Svelte 5 with animated drop previews, auto-scroll, pointer & touch support, keyboard navigation, and multi-container layouts.

## Docs

- [Accessibility](/docs/accessibility.md): Keyboard navigation, ARIA attributes, and screen-reader announcements.
- [Behaviors](/docs/behaviors.md): Pluggable drop-side hooks — auto-scroll under drag, scroll-sync during drop animations, and any future plugins. Composable per controller and per strategy.
- [Collision Detection](/docs/collision.md): Pluggable collision algorithms — centerPoint, cursorOver, overlap, closestCenter, or custom.
- [CSS Custom Properties & Classes](/docs/css-custom-props.md): Reference for all --dnd-* CSS custom properties and CSS classes used by the library.
- [Custom Strategies](/docs/custom-strategies.md): Write or extend container strategies and pass them directly to DndDroppable.
- [DndController API](/docs/dnd-controller-api.md): Full API reference for DndController — reactive getters, event callbacks, methods, and types.
- [FAQ](/docs/faq.md): Common questions and answers about @horuse/svelte-dnd usage, configuration, and known limitations.
- [Getting Started](/docs/getting-started.md): Installation and basic setup of @horuse/svelte-dnd
- [HTML Attributes](/docs/html-attributes.md): Reference for all data-dnd-* HTML attributes set and consumed by the library.
- [Modifiers](/docs/modifiers.md): Transform modifiers that constrain or snap ghost movement during drag.
- [Sensors](/docs/sensors.md): Pluggable input sensors — configure PointerSensor and KeyboardSensor or write your own.
- [Simulations](/docs/simulations.md): Programmatically animate items and layout changes through DndController for undo/redo, onboarding, and demo sequences.

## Components

- [DndDraggable](/docs/components-api/DndDraggable.md): API reference for the DndDraggable component — props, events, CSS variables, and drag handle attributes.
- [DndDroppable](/docs/components-api/DndDroppable.md): API reference for the DndDroppable and DndPreview components — props, strategy, and type filtering.
- [DndProvider](/docs/components-api/DndProvider.md): API reference for the DndProvider component — props, ghost snippet, and CSS variables.

## Migrations

- [Migrating from v0.3.0](/docs/migrations/v0.3.0.md): How to migrate to @horuse/svelte-dnd v1 from v0.3.0

## Examples

- [Custom Ghost](/examples/custom-ghost): Example combining a custom ghost snippet with scoped preview styling via CSS custom properties.
- [Grid](/examples/grid): Grid sortable example using sortable({ layout: 'grid' }) with CSS Grid layout.
- [Horizontal List](/examples/horizontal): Horizontal sortable list using sortable({ layout: 'horizontal' }) on DndDroppable.
- [Multi Container](/examples/multi-container): Kanban board example demonstrating moving items between multiple DndDroppable containers.
- [Sortable Containers](/examples/sortable-containers): Advanced example with draggable columns and tasks using nested DndDroppable components.
- [Target Zones](/examples/target-zones): Mixing sortable() and target() — a horizontal pool plus three single-item drop slots, with a round → square morph and a FLIP-animated swap when a slot is already occupied.
- [Vertical List](/examples/vertical): Simple vertical sortable list demonstrating auto-scroll with 50 items.
- [Vertical Sortable Containers](/examples/vertical-sortable-containers): Example with vertically stacked DndDroppable containers where items can be dragged between them.
- [Virtualization](/examples/virtualization): Sortable list with 5000 items rendered through virtua's virtualized list.