Learn how to use Sortable.js and React to create lists, drag-and drop items, sort lists, and reorder lists.

There are many libraries today that handle drag-and-drop, list sorting, and reordering. In the era of jQuery widgets, dozens of plugins could easily transform simple and static lists in deep-interactive and dynamic structures.

In the world of vanilla JavaScript, we have the famous Sortable.js. With more than 20.5k stars on its GitHub repo at the time of this writing, the community behind the library has built a solid environment that spreads throughout lots of supports: jQuery, Meteor.js, AngularJS, React, Polymer, Vue, Ember, Knockout and any CSS library, e.g. Bootstrap.

It is also supported in most modern browsers, including a fallback option available at the API for non HTML5 browsers, providing us with the ability to test the behavior in older browsers or make the drag-and-drop feel more consistent between desktop, mobile, and old browsers.

In this tutorial, we’re going to explore the official support for React via the react-sortablejs wrapping component. Let’s analyze how Sortable.js organizes a list of items by creating, editing, and deleting some of them. Finally, we’ll allow the user to switch between a list of items and a grid disposition.

At the end of the tutorial, this is how our example will look:

#react #sortable #javascript #developer