The jQuery UI Sortable plugin is one of the most popular tools for creating sortable lists. However, you may not want to include the entire jQuery UI library just to add drag-and-drop functionality to your website. Instead, you can use a lightweight JavaScript library or a jQuery plugin that works without jQuery UI.
Here are five useful JavaScript plugins that make it easy to create drag-and-drop sorting lists.
1. Sortable HTML5
HTML5 Sortable is a lightweight JavaScript library that uses the native HTML5 Drag and Drop API to create sortable lists and grids. It offers a simple way to add sorting features without relying on large libraries.
Its main features include:
- Small file size of around 2KB when minified and gzipped.
- Uses the native HTML5 Drag and Drop API.
- Supports both list and grid layouts.
- Works with modern versions of Chrome, Firefox, Safari, Opera, and Edge, as well as Internet Explorer 11 with a polyfill where required.
- Supports AMD, CommonJS, ES6 modules, and an immediately invoked function expression (IIFE) with a global
sortableobject.
One advantage of this library is its small size, which helps reduce page loading times. Instead of making every user download extra code for older browsers, developers can add a polyfill only when necessary. This approach keeps the library lightweight while providing compatibility where needed.
2. Sortable Lists with jQuery
The jQuery Sortable Lists plugin allows developers to rearrange HTML lists and create sortable tree structures. It supports smooth dragging, scrolling, and flexible control over how items can be moved.
Key features include:
- Sort items in HTML lists using a mouse.
- Create and rearrange nested tree structures.
- Configure active elements and define custom sorting rules.
- Use the
isAllowedcallback to control whether an item can be dropped into a particular location. - Adjust the insertion zone to control auto-scrolling and determine where dragged items can be placed.
- Use callbacks such as
onDragStart,onChange, andcompleteto respond to sorting events. - Support mobile devices through a dedicated mobile version.
For mobile compatibility, developers can use jquery-sortable-lists-mobile.js instead of jquery-sortable-lists.js. This makes the plugin a useful option for projects that need sortable lists on both desktop and mobile devices.
3. Sortable Decorator Plugin for Ractive.js
The sortable decorator plugin for Ractive.js uses the HTML5 Drag and Drop API to rearrange elements associated with an array. When a user moves an item, the array order is updated to match the new arrangement.
This feature is useful for applications that display dynamic lists and need their data to remain in sync with the user interface.
Its main features include:
- Rearranges elements connected to array items.
- Updates the array order after a drag-and-drop operation.
- Adds a CSS class to the target element when a dragged item moves over it.
- Allows developers to customise the appearance of drop targets.
- Uses the class name
droptargetby default.
Developers can use the droptarget class to highlight a valid drop area with a dashed border, change its background, or hide certain content while an item is being dragged. This provides greater control over the visual experience without requiring a complicated implementation.
4. jQuery Sortable
jQuery Sortable is a flexible plugin that lets users rearrange items in lists, tables, and other containers by dragging them with a mouse. It supports both horizontal and vertical sorting and can work with nested lists.
Unlike the jQuery UI Sortable plugin, it does not require jQuery UI. It also works with Twitter Bootstrap, making it suitable for projects that use Bootstrap navigation menus and other interface components.
Its key features include:
- Sort items inside different types of containers.
- Support nested containers and lists.
- Rearrange links and navigation menus.
- Handle events through callbacks.
- Create drag-and-drop-only containers.
- Sort items horizontally or vertically.
- Integrate with Bootstrap without requiring jQuery UI.
These features make jQuery Sortable a practical choice for developers who need flexible sorting functionality without adding an entire user interface library to their projects.
5. SortableJS
SortableJS is a popular JavaScript library for adding drag-and-drop sorting to lists. It allows users to rearrange items within a list or move them between different lists.
The library supports modern browsers, touch-enabled devices, and several useful customisation options, making it suitable for a wide range of web applications.
Its main features include:
- Supports modern browsers and touch devices, with compatibility options for older browsers.
- Allows items to be moved within and between lists.
- Provides CSS animations when items are rearranged.
- Supports drag handles and selectable text.
- Includes automatic scrolling during drag operations.
- Offers advanced swap detection to improve item placement.
- Uses native HTML5 drag-and-drop functionality.
SortableJS is especially useful for applications such as task boards, content management systems, navigation menus, and interactive dashboards. Its support for multiple lists and custom drag behaviour makes it a flexible option for projects that require more than basic sorting.
Conclusion
JavaScript offers several ways to add drag-and-drop sorting without relying on the full jQuery UI library. HTML5 Sortable is a lightweight option, jQuery Sortable Lists supports nested structures, the Ractive.js decorator works with array-based data, jQuery Sortable provides flexible container sorting, and SortableJS offers a wide range of customisation features.
The right choice depends on your project’s requirements, browser support, and existing technology stack. Before selecting a plugin, review its documentation and test its behaviour on desktop and mobile devices.
If you know of other useful open-source JavaScript libraries for drag-and-drop sorting, share them in the comments to help other developers discover more options.
