The jQuery sortable plugin is undoubtedly one of the most well-known features of the library. However, there are instances in which you may not wish to incorporate the entire jQuery UI library in order to add this feature. Rather, you may prefer to use another vanilla library to implement this feature or complement it with jQuery (without jQuery UI).
We’ll share with you five of the best JavaScript plugins for drag-and-drop sorting lists.
1. Sortable HTML5
HTML5 is a lightweight vanillajs micro-library that uses the native HTML5 drag and drop API to create sortable lists and grids. This template has the following features:
- Just 2KB (gzipped and reduced in size).
- Native HTML5 drag and drop API was used in its construction. No reliance.
- Both list and grid type layouts are supported.
- Current versions of all popular browsers, including Chrome, Firefox, Safari, Opera, and Edge, as well as IE11+ (which requires Polyfill), are supported.
- AMD, CommonJS, ES6 Module, and iffe with sortable global
We would rather offer a tiny package and let outdated browsers suffer the consequences of the polyfill, whereas a backwards-facing strategy penalizes newer browsers by requiring users to download large files. Another advantage is that you could polyfill such functionalities nevertheless to avoid adding to your load.
2. Sortable Lists with jQuery
Lists and tree structures can be sorted using a jQuery plugin. fluid movement when scrolling and dragging. You can use a mouse to sort things in HTML lists. Build tree constructions. All active objects should be formatted. The isAllowed callback, which decides if a dragged object can be placed into another, can be defined. Insert zone is a distance that controls the autoscroll function’s speed and whether an item will be put inside or outside of the active region. OnDragStart, onChange, complete callback, and more are available. See the image that details every active element in the sortable lists plugin for a better understanding. The plugin now works with mobile devices as well. Instead of linking to jquery-sortable-lists.js, use jquery-sortable-lists-mobile.js.
3. The sortable decorator plugin for Ractive.js
By adding a sortable decorator to Ractive, this plugin makes it possible to use the HTML5 drag and drop API to rearrange elements that match array members. By doing this, the array’s order will be updated. The target element will receive a class name when the user drags the source element over it. This enables you to render the target in a different way, such as by adding a dashed border or hiding the text. This class is named “droptarget” by default.
4. Sortable with jQuery
A versatile and subjective sorting plugin is jQuery Sortable. It makes it possible to use the mouse to sort items in a list (or table, etc.) both horizontally and vertically. Both pure drag/drop containers and nested lists are supported. jQuery Sortable is compatible with Twitter’s Bootstrap and does not rely on jQuery UI (you can even sort the Bootstrap navigation). This plugin has the following features:
- arranges anything in any container.
- Completely compatible with nested containers
- Link lists
- Events and callbacks (see docs)
- Lists that are only drag and drop
- Sorting in both vertical and horizontal directions
5. SortableJS
One of the most well-known components for using JavaScript to drag and drop lists is SortableJS. A JavaScript package called Sortable allows drag-and-drop lists to be rearranged. This library has the following features:
- supports contemporary browsers (including IE9) and touch devices.
- able to drag both within and across lists.
- When moving things, CSS animation
- Drag handles and selectable text are supported (better than voidberg’s html5sortable).
- Astute auto-scrolling
- Advanced detection of swaps
- Constructed with the native HTML5 drag and drop API
Please use the comment section to let the community know about any other fantastic open-source component that lets you sort lists by drag and drop.
