Overview

Key features

• Framework agnostic: First-class support for React, Vue, Svelte, Solid, and Vanilla
• Batteries included: Drag, drop, sort, and reorder in any layout or direction
• Fully extensible: Plugins, sensors, and modifiers for complete control
• Production ready: Built for performance, accessibility, and reliability

Getting started

Choose your preferred framework to get started:

<CardGroup cols={2}> <Card title="Vanilla" icon="js" href="/quickstart" > Build drag and drop interfaces using plain JavaScript </Card> <Card title="React" icon="react" href="react/quickstart" > Build drag and drop interfaces using React components and hooks </Card> <Card title="Vue" icon="vuejs" href="vue/quickstart" > Build drag and drop interfaces using Vue composables and components </Card> <Card title="Svelte" icon="svelte" href="svelte/quickstart" > Build drag and drop interfaces using Svelte primitives and components </Card> <Card title="Solid" icon="solidjs" href="solid/quickstart" > Build drag and drop interfaces using SolidJS hooks and components </Card> </CardGroup>

Core Concepts

Learn the essential building blocks:

<CardGroup cols={2}> <Card title="Manager" icon="sitemap" href="concepts/drag-drop-manager" > The central orchestrator that coordinates drag and drop operations </Card> <Card title="Draggable" icon="bullseye-pointer" href="concepts/draggable" > Elements that can be picked up and dragged to new locations </Card> <Card title="Droppable" icon="expand" href="concepts/droppable" > Target areas where draggable elements can be dropped </Card> <Card title="Sortable" icon="layer-group" href="concepts/sortable" > Draggable elements that can be reordered within and across lists </Card> </CardGroup>

Extend and customize

Make it your own with powerful extension points:

<CardGroup cols={2}> <Card title="Plugins" icon="cube" href="extend/plugins" > Add new features and behaviors with the plugin system </Card> <Card title="Sensors" icon="signal-stream" href="extend/sensors" > Support different input methods like mouse, touch, and keyboard </Card> <Card title="Modifiers" icon="arrows-from-line" href="extend/modifiers" > Modify drag behavior with constraints and transformations </Card> </CardGroup>

Sponsors

<div className="sponsors"> <Frame> <a href="https://sentry.io/" target="_blank"> </Frame> <Frame> <a href="https://www.any.do/" target="_blank"> </Frame> <Frame> <a href="https://doist.com/" target="_blank"> </Frame> <Frame> <a href="https://puckeditor.com/" target="_blank" style={{position: "relative", top: 4}}> </Frame> <Frame> <a href="https://httpie.io/" target="_blank"> </Frame> <Frame> <a href="https://mintlify.com/" target="_blank"> </Frame> </div>