React Sortable

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.

Installation

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"

Example

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) {
    this.setState(obj);
  },

  render: function() {
    var childProps = { className: 'myClass1' };
    var listItems = this.state.data.items.map(function(item, i) {
      return (
        <SortableListItem
          key={i}
          updateState={this.updateState}
          items={this.state.data.items}
          draggingIndex={this.state.draggingIndex}
          sortId={i}
          outline="list"
          childProps={childProps}
          >{item}</SortableListItem>
      );
    }, 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: [
    "Gold",
    "Crimson",
    "Hotpink",
    "Blueviolet",
    "Cornflowerblue"
  ]
};

ReactDOM.render(
    <SortableList data={data} />,
    document.body
);

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 "column")
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 well 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.

Development