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 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 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">{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 this simple working demo in ./example folder.
The Sortable higher order component will automatically attach the necessary drag event handlers.
It will 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)
- fewer lines of code = easier to implement and modify
- can handle both horizontal and vertical dragging
- there is a plan for touch support
- code is well documented and covered with unit tests
- but, if you want to have multiple different types of Drag & Drop interactions (not only sortable), you should definately check out react-dnd
Except from example-from-npm at all the examples are loading the library code from ./src folder.
That means you can use them to see how does a changes in the source code affect the functionality of the component.