How to make Sortable Lists with CSS and jQuery

An MIT licensed Javascript library called Sortable. It’s a JavaScript library for reorderable, Sortable, drag-and-drop lists using CSS and Javascript.

Demo Available Here

Install with NPM:

$ npm install sortablejs --save

Install with Bower:

$ bower install --save sortablejs

Import into your project:

// Default SortableJS
import Sortable from 'sortablejs';

// Core SortableJS (without default plugins)
import Sortable from 'sortablejs/modular/sortable.core.esm.js';

// Complete SortableJS (with all plugins)
import Sortable from 'sortablejs/modular/sortable.complete.esm.js';

Cherrypick plugins:

// Cherrypick extra plugins
import Sortable, { MultiDrag, Swap } from 'sortablejs';

Sortable.mount(new MultiDrag(), new Swap());

// Cherrypick default plugins
import Sortable, { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js';

Sortable.mount(new AutoScroll());


<ul id="items">
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
var el = document.getElementById('items');
var sortable = Sortable.create(el);

You can use any element for the list and its elements, not just ul/li. Here is an example with divs.

View the Demo