RSK World - Drag and Drop Interface | Sortable Lists, Kanban Cards, Drop Zones | RSK World

Sortable List Kanban & Drop Zones Undo/Redo & Persistence Themes & Animations Vanilla JS

Drag and Drop Interface is an interactive demo with sortable lists and kanban-style cards. Features: HTML5 Drag and Drop API, optional drag handle, reorder by drag or keyboard (arrows, Home, End); cards move between columns (To do, In progress, Done) and optional Trash zone; undo/redo (configurable stack); persistence to localStorage (list order, kanban state, theme); themes (dark, light, contrast); touch support via touch.js; keyboard reorder and column move; add task and add card; export/import state as JSON; help modal (? shortcut); live region announcements (a11y.js); spring drop and placeholder pulse animations. Files: index.html, script.js, config.js, storage.js, undo.js, utils.js, events.js, a11y.js, touch.js, keyboard.js, add-items.js, export-import.js, help.js, styles.css, animations.css, print.css. By rskworld.in.

If you find this Drag and Drop Interface project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Drag and Drop Interface

Sortable List & Drag and Drop

script.js: sortable list with dragstart/dragover/drop; optional drag handle (useDragHandle in config); cards drag between drop zones and Trash. event delegation so dynamically added items work. Visual feedback: .dragging, .drag-over, dropped animation. data-id on items and cards for persistence.

script.js: list and card drag/drop, persistList(), persistKanban()
config.js: useDragHandle, allowTrash, animations
HTML5 Drag and Drop API, setDragImage, dataTransfer
Event delegation for new list items and cards

Project Structure & Files

index.html: toolbar, sortable list, kanban columns (To do, In progress, Done, Trash), add task/card forms, help modal. config.js, storage.js, undo.js, utils.js, events.js, a11y.js, touch.js, keyboard.js, add-items.js, export-import.js, help.js, script.js. styles.css, animations.css, print.css. No build step. Open index.html or serve folder.

index.html – main page with list, cards, toolbar, help
No build step – open index.html or static server
DM Sans, JetBrains Mono (Google Fonts)
Zero dependencies; vanilla HTML, CSS, JavaScript

Themes & Animations

styles.css: data-theme (dark, light, contrast) with CSS variables. animations.css: dropSpring, placeholderPulse, trashPulse, touchClonePop, fadeInUp stagger. config.animations toggles drop/spring. Theme saved to localStorage when persist is on.

styles.css: :root, [data-theme="light"], [data-theme="contrast"]
animations.css: dropSpring, placeholderPulse, fadeInUp
CSS variables for bg, surface, border, accent, trash
Smooth transitions on drag and drop states

Undo, Storage & Export/Import

undo.js: snapshot list order and kanban zones before each move; undo/redo stacks (undoStackMax in config). storage.js: saveListOrder, saveKanbanState, saveTheme to localStorage (rskworld-drag-drop-state). export-import.js: getFullState (list + kanban + theme), export as JSON file, import from file and apply.

undo.js: snapshot(), restore(), pushUndo(), undo(), redo()
storage.js: saveListOrder, saveKanbanState, loadTheme
export-import.js: exportState(), importState(), applyImportedState()
Toolbar: Undo, Redo, Reset, Save state toggle

UI Sections & Toolbar

Sortable list section with add task input. Cards section with three columns (To do, In progress, Done) and Trash. Toolbar: Undo, Redo, Reset, Save state, Theme (Dark/Light/Contrast), Export, Import, Help. Help modal: keyboard shortcuts (? to open), Close and overlay. Add card: input + column select + Add card button.

Sortable list – drag handle or row, add task below
Kanban – To do, In progress, Done, Trash
Toolbar – Undo, Redo, Reset, Save state, Theme, Export, Import, Help
Help modal – ? key, Escape, overlay click

What You Get

Static HTML/CSS/JS: index.html, config.js, storage.js, undo.js, utils.js, events.js, a11y.js, touch.js, keyboard.js, add-items.js, export-import.js, help.js, script.js, styles.css, animations.css, print.css. README.md and CHANGELOG.md. No build step. Open index.html or serve folder.

Complete source – all HTML, CSS and JS files
No build step – open index.html or static server
README.md with features, config, usage
Technologies: HTML5, CSS3, Vanilla JS. © 2026 RSK World.

Usage

Open index.html for sortable list and kanban. Drag by handle or row; use keyboard (Tab to focus, arrows to reorder/move). Toggle Save state for persistence. Use Theme for Dark/Light/Contrast. Add task and Add card via inline inputs. Export/Import for backup. Press ? for help. See README.md.

index.html – sortable list, kanban, toolbar, help
config.js: persist, undoStackMax, useDragHandle, theme, allowTrash
Accessibility: live region, ARIA, keyboard, print.css
Author: RSK World | rskworld.in

Project Features

Sortable list with drag handle, kanban cards between columns, Trash zone, undo/redo (50 steps), localStorage persistence, three themes, touch support (touch.js), keyboard reorder and column move, add task and add card, export/import JSON, help modal, live region announcements, spring and pulse animations. All vanilla JS, no frameworks.

Core: sortable list, kanban columns, drop zones, Trash
Advanced: undo/redo, persistence, themes, touch, keyboard, export/import
a11y.js live region; help.js modal
Vanilla JS, responsive, mobile-friendly

Credits & Acknowledgments

Drag and Drop Interface by RSK World. Interactive sortable lists and kanban cards with persistence, undo/redo, themes, touch, keyboard and accessibility for learning drag-and-drop UI patterns and vanilla JS.