The jQuery sortable plugin is probably one of the most known features of the library but sometimes you are not willing to include the whole jQuery UI library just to add this feature. Instead, you might want to use another vanilla library to implement this feature or complement it with jQuery (no jQuery UI).
In this article we will share with you 5 of the most useful plugins to generate sortable lists by drag and drop in JavaScript.
1. HTML5 Sortable.
HTML5 is a lightweight vanillajs micro-library that uses native HTML5 drag and drop API to create sortable lists and grids. This template includes:
- It’s only 2KB (minified + gzipped).
- Built using native HTML5 drag & drop API. No dependencies.
- Support list and grid type layouts.
- Supported Browsers Current versions of all main browsers (Chrome, Firefox, Safari, Opera, Edge) IE11+ (Polyfill required)
- ES6 Module, AMD, CommonJS and iffe with global sortable available
While a backward facing method penalizes current browsers by making them download enormous files, we choose to ship a tiny package and make obsolete browser pay the penalty of the polyfill. Another benefit is that you’ll likely polyfill those features anyhow so you won’t have any extra burden.
2. jQuery Sortable Lists
jQuery plugin for sorting lists and also trees. Smooth movement while dragging and scrolling. You may sort html list elements by mouse. Build tree constructions. Format all live things. You can define an isAllowed callback that defines if a dragged object can be dropped into another. zone like a distance that decides if item will be inserted inside or outside of the active region, speed of autoscroll function. OnDragStart, onChange and complete callback and more are available. See the graphic for better understanding, it describes all active aspects in sortable lists plugin. Now plugin also supports mobile devices. Use jquery-sortable-lists-mobile.js instead of jquery-sortable-lists.js.
3. Ractive.js sortable decorator plugin
This plugin adds a sortable decorator to Ractive that enables elements corresponding to array members to be re-ordered using the HTML5 drag and drop API. The array will be reordered. If the user is dragging the source element over a target element, the target element will be given a class name. This allows you to render the target differently (hide the text, add a dashed border, whatever). The class name is ‘droptarget’ by default.
4. jQuery Sortable
jQuery Sortable is an opinionated, versatile sorting plugin. It allows you to sort items in a list (or table etc.) horizontally and vertically with the mouse. Supports nested lists and pure drag/drop containers. jQuery Sortable does not rely on jQuery UI and is compatible with Twitter’s Bootstrap (you can even sort the Bootstrap navigation). This plugin includes:
- Sorts any item in any container.
- Complete support for nested containers
- Lists to connect
- Callbacks & Events (see docs)
- Drag/drop lists only
- Sorting vertically and horizontally
5. SortableJS
SortableJS is a popular component that enables you to re-order lists by drag and drop using JavaScript. Sortable is a JavaScript module for reorderable drag-and-drop lists. This library includes:
- Modern browsers (including IE9), touch devices support
- Drag across lists or within the same list
- CSS animation during item movement
- Provides drag handles and selected text (better than voidberg’s html5sortable)
- Auto scroll
- Intelligent Swap Identification
- Based on the native HTML5 drag and drop API
If you know of another great open source component that lets you arrange lists by drag and drop, please share it with the community in the comment box.