A sortable list component built with React
JavaScript HTML CSS
Latest commit d37a997 Jan 16, 2017 @Dharmoslap Dharmoslap prop move in teh middle


React Sortable

David npm GitHub commits npm

A React higher-order component for creating sortable interfaces utilizing the HTML5 drag & drop API.

Mainly tested in latest stable Webkit, Firefox and IE releases.

Check out http://webcloud.se/react-sortable or the index.html file of this repository for an example implementation.


To install a stable release use:

npm i react-sortable --save

If you want to install the most current master branch, open your package.json and change the line for react-sortable like this:

"react-sortable": "https://github.com/danielstocks/react-sortable/tarball/master"


Here's a sample implementation using the react-sortable higher order component:

import React from 'react';
import { sortable } from 'react-sortable';

var ListItem = React.createClass({
  displayName: 'SortableListItem',
  render: function() {
    return (
      <div {...this.props} className="list-item">{this.props.children}</div>

var SortableListItem = sortable(ListItem);

var SortableList = React.createClass({

  getInitialState: function() {
    return {
      draggingIndex: null,
      data: this.props.data

  updateState: function(obj) {

  render: function() {
    var childProps = { className: 'myClass1' };
    var listItems = this.state.data.items.map(function(item, i) {
      return (
    }, this);

    return (
          <div className="list">{listItems}</div>

Here's some example data and a render call to the above component:

import ReactDOM from 'react-dom';

var data = {
  items: [

    <SortableList data={data} />,

You can see this simple working demo in the ./example folder.

How it works

The Sortable higher order component will automatically attach the necessary drag event handlers.

It expects the following properties to be defined on your Item components:

  • key (number index, common recommendation)
  • updateState (function called when an item is moved)
  • draggingIndex (number index of item being dragged)
  • items (array of data being sorted)
  • outline (string "list" or "grid")
  • sortId (number index of item)
  • childProps (props to transfer to child)

Differences from react-dnd sortable

  • fewer lines of code = easier to implement and modify
  • can handle both horizontal and vertical dragging
  • code is documented and covered with unit tests

If you want to have multiple different types of Drag & Drop interactions (not only sortable), you should definitely check out react-dnd

Touch support

Internally the component is usign DragEvent interface. Unfortunately at the moment there is almost no support of this interface in mobile browsers. I started to work on CSS/JS fallback for mobile broser on 'touch' branch.


The examples (except for example-from-npm) are loading the library code from the ./src folder. That means you can use them to see how a change in the source code affects the functionality of the component.