Resortable

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

✨ Smooth Animations ⌨️ Keyboard Navigation 📱 Touch & Pen Support ♿ WCAG 2.1 AA 🚀 Zero Dependencies 📝 TypeScript First

✨ Smooth Transitions

Animated reordering with easing curves you can configure per-instance

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

🎯 Advanced Interactions

Powerful features for complex use cases

Multi-Select & Drag

Alpha
Beta
Gamma
Delta
Epsilon
💡 Try: Click items to toggle selection — then drag any selected item to move the whole group together.

Keyboard Navigation

🎵 Allegro
🎶 Andante
🎼 Largo
🎹 Presto
💡 Try: Tab into the list, then ↑/↓ to move focus, Space to toggle selection (additive), Enter to grab, ↑/↓ to move, Enter to drop, Esc to cancel.

🛠️ 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