SortableJS is a JavaScript library that makes it easy to create reorderable drag-and-drop lists and grids. It is a simple library without any dependencies, which makes it lightweight and easy to use. SortableJS provides a simple, easy-to-use API for defining the behavior of drag-and-drop operations, including callbacks for events such as start, update, and end. The library supports both mouse and touch events, and can be used with a wide variety of frameworks and libraries, such as React, Vue, and Angular.
Include in 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';
Usage
<ul id="items">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
var el = document.getElementById('items');
var sortable = Sortable.create(el);