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) { 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.

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)

• 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.

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.