Resortable

A modern, accessible, and performant drag-and-drop library built with TypeScript

✨ Smooth Animations ⌨️ Keyboard Navigation 📱 Touch & Pen Support ♿ WCAG 2.1 Compliant 🚀 Zero Dependencies 📦 < 10KB gzipped

✨ Visual Effects

Beautiful animations and transitions that delight users

Smooth Transitions

🎨 Gradient Card
🚀 Hover Effects
✨ Smooth Animation
💫 Transform Scale

Spring Physics

🌸 Spring Motion
🎯 Elastic Bounce
🎪 Playful Animation
🎭 Dynamic Feel

🎯 Advanced Interactions

Powerful features for complex use cases

Multi-Select (Click to Toggle)

📝 Task Alpha
📊 Task Beta
📈 Task Gamma
📉 Task Delta
📋 Task Epsilon

Keyboard Navigation

🎹 Press Tab to Focus
⬆️ Arrow Keys to Navigate
🔤 Space to Select
↩️ Enter to Grab/Drop
💡 Try it: Tab → Arrow keys → Space (select) → Enter (grab) → Arrow keys (move) → Enter (drop)

🛠️ Practical Examples

Real-world applications ready to use

Kanban Board

📋 To Do

Design new homepage
High Priority
Update documentation
Medium Priority
Fix responsive issues
Low Priority

🚧 In Progress

Implement drag & drop
High Priority
Write unit tests
Medium Priority

✅ Done

Setup TypeScript
Low Priority

Image Gallery

File Explorer (Nested Lists)

📁 Documents
📄 Report.pdf
📄 Presentation.pptx
📄 Budget.xlsx
📁 Images
🖼️ Photo1.jpg
🖼️ Photo2.png
🖼️ Logo.svg
📁 Code
📝 index.html
🎨 styles.css
⚡ script.js

🔲 Marquee Select

Rubber-band selection like Finder / Explorer

Drag empty space to select — Shift adds, Alt subtracts

🟦 Item One
🟩 Item Two
🟨 Item Three
🟧 Item Four
🟥 Item Five
🟪 Item Six
💡 Try: Click+drag empty space → marquee selects items  |  Shift+drag → add to selection  |  Alt+drag on items → starts marquee (not drag), removes from selection  |  📱 Long-press empty space → touch marquee

🔧 Developer Testing Area

Library Status: Loading...

Basic Sortable List

Basic

Basic 1
Basic 2
Basic 3
Basic 4

Shared Groups

Group A - List 1

A1
A2
A3
A4

Group A - List 2

A5
A6
A7
A8

Independent Groups

Group A

GA1
GA2
GA3

Group B

GB1
GB2
GB3

Grid Layout

Grid 1

G1-1
G1-2
G1-3
G1-4

Grid 2

G2-1
G2-2
G2-3
G2-4

Legacy E2E Test Lists

List 1

Item 1
Item 2
Item 3
Item 4

List 2

Item 5
Item 6
Item 7
Item 8

Fallback Mode

forceFallback: true

FB1
FB2
FB3
FB4