# SortableJS — Reorderable Drag-and-Drop Lists for the Web

> SortableJS is a dependency-free JavaScript library for creating sortable drag-and-drop lists and grids, with built-in support for React, Vue, and Angular.

## Install

Save as a script file and run:

# SortableJS — Reorderable Drag-and-Drop Lists for the Web

## Quick Use
```bash
npm install sortablejs
```
```js
import Sortable from 'sortablejs';

const el = document.getElementById('items');
Sortable.create(el, {
  animation: 150,
  ghostClass: 'sortable-ghost',
  onEnd: (evt) => console.log('moved', evt.oldIndex, '->', evt.newIndex)
});
```

## Introduction
SortableJS gives any HTML list or grid drag-and-drop reordering with zero dependencies. It works on both desktop and touch devices out of the box, handles nested lists, and supports dragging items between containers. Official adapters for React, Vue, and Angular make it easy to integrate with any modern framework.

## What SortableJS Does
- Turns any list or grid into a sortable drag-and-drop interface
- Supports moving items between multiple connected lists
- Works on touch devices with native touch event handling
- Provides smooth CSS-based animation during reorder operations
- Ships with official framework bindings for React, Vue 2/3, and Angular

## Architecture Overview
SortableJS listens for mouse and touch events on a container element. When a drag starts, it clones the dragged element as a ghost and tracks pointer position to determine the drop target. Reordering is performed by manipulating the DOM directly, swapping or inserting elements at the computed index. The library uses CSS transforms for animation and dispatches events at each lifecycle stage: start, move, end, add, remove, and sort.

## Self-Hosting & Configuration
- Install via npm or include the UMD bundle from a CDN
- Call `Sortable.create(element, options)` to activate on any container
- Use `group` option to link multiple lists for cross-container dragging
- Configure `handle`, `filter`, and `draggable` selectors to control what can be dragged
- For React, use `react-sortablejs`; for Vue, use `vue-draggable-plus` or `vuedraggable`

## Key Features
- Zero dependencies and under 10 KB gzipped
- Nested sortable lists with automatic scroll during drag
- Multi-drag plugin for selecting and moving multiple items at once
- Swap plugin for swapping items instead of inserting
- AutoScroll built in for long lists that exceed viewport height

## Comparison with Similar Tools
- **dnd-kit** — React-specific with hooks-based API; SortableJS is framework-agnostic
- **React Beautiful DnD** — Atlassian library now archived; SortableJS is actively maintained
- **React DnD** — lower-level drag-and-drop primitives; SortableJS is higher-level and list-focused
- **Dragula** — simple drag-and-drop between containers; SortableJS adds sorting, nesting, and plugins
- **HTML Drag and Drop API** — native browser API with inconsistent behavior; SortableJS normalizes it

## FAQ
**Q: Does SortableJS work with touch devices?**
A: Yes. It handles touch events natively without additional libraries or polyfills.

**Q: Can I drag items between different lists?**
A: Yes. Set the `group` option to the same name on multiple Sortable instances to enable cross-list dragging.

**Q: How do I persist the new order?**
A: Listen to the `onEnd` or `onSort` event, read the updated indices, and save the new order to your backend.

**Q: Does it work with virtual/windowed lists?**
A: SortableJS manipulates DOM nodes directly, so it works best with fully rendered lists. For virtualized lists, use a framework adapter that bridges the virtual state.

## Sources
- https://github.com/SortableJS/Sortable
- https://sortablejs.github.io/Sortable
- https://github.com/SortableJS/react-sortablejs

---
Source: https://tokrepo.com/en/workflows/ae9bda00-44b2-11f1-9bc6-00163e2b0d79
Author: Script Depot