sortablejs/sortable

Sortable is a JavaScript library that adds drag-and-drop reordering to lists and grids in a web page. The problem it solves is a common UI need: users want to rearrange items, tasks in a to-do list, columns in a dashboard, cards in a Kanban board, by picking them up with a mouse or finger and dropping them in a new position. Implementing this from scratch with the browser's raw drag-and-drop API is awkward and inconsistent across devices, especially on touch screens. Sortable handles all of that for you with a simple setup call. Under the hood, the library uses the browser's native HTML5 Drag and Drop API where available and falls back to pointer-event tracking on touch devices. You point it at any container element, a <ul>, a <div>, a grid, and it makes all direct children draggable. As the user drags an item, Sortable plays smooth CSS animations and shows a ghost placeholder where the item will land. It emits events at each stage of a drag (start, move, end, add to another list, remove from a list) so you can sync the new order to a database or update your application state. You can also configure groups of lists so items can be dragged between them, cloned rather than moved, or restricted to specific drop zones. You would use Sortable when building task management tools, file managers, playlist editors, form builders with reorderable fields, or any interface where users need to sequence or organize items visually. Because it has no dependencies, no jQuery, no React, no framework required, it fits into any project. Official wrapper packages exist for React, Vue, Angular, Knockout, Polymer, and Ember for those who prefer framework-integrated solutions. The tech stack is plain JavaScript, available on npm or via CDN, with TypeScript type definitions available separately.