React Sortable

** VERY MUCH WORK IN PROGRESS **

A React component and mixin for creating sortable interfaces utilizing the HTML5 drag & drop API.

Mainly tested in latest stable Webkit and Firefox releases.

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

For nested sortable data structures: Take a look at http://webcloud.se/react-sortable/nested.html or the nested.html file. This implementation is still highly experimental.

Get started

After cloning the directory run bower install to get the react dependencies. Spin up a local webserver serving the project directory (for instance, python -m http.server if you have Python 3.X installed, or python -m SimpleHttpServer with Python 2.X) and open it in your browser.

Example implementation

Here's a sample implementation using the react-sortable mixin.

/** @jsx React.DOM */varSortableListItem=React.createClass({mixins: [Sortable],render: function(){returnthis.transferPropsTo(<liclassName={this.isDragging() ? "dragging" : ""}>{this.props.item}</li>);}})varApp=React.createClass({getInitialState: function(){return{data: this.props.data};},sort: function(items,dragging){vardata=this.state.data;data.items=items;data.dragging=dragging;this.setState({data: data});},render: function(){varlistItems=this.state.data.items.map(function(item,i){return(<SortableListItemsort={this.sort}data={this.state.data}key={i}item={item}/>);},this);return<ul>{listItems}</ul>}});

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

/** @jsx React.DOM */vardata={items: ["Gold","Crimson","Hotpink","Blueviolet","Cornflowerblue","Skyblue","Lightblue","Aquamarine","Burlywood"]};React.renderComponent(<SortableListdata={data}/>,document.body);

How it works

The Sortable mixin will automatically attach the necessary drag event handlers providing you render your item with the react helper method: transferPropsTo.

The Sortable mixin expects the following properties to be defined on your Sortable Item components:

• sort (the method that will be called when an item is moved)
• data (the complete list being sorted)
• key (React recommends that you use this)
• item (The item itself)