<main></main>
var Sortable = React.createClass({
getInitialState: function() {
return { items: this.props.items };
},
componentDidMount: function() {
var $el = $(React.findDOMNode(this.refs.root));
$el.sortable({ stop: this.onUpdate });
},
componentWillUnmount: function() {
$el.sortable('destroy');
},
onUpdate: function(ev, ui) {
var $el = $(React.findDOMNode(this.refs.root));
var arr = $el.sortable('toArray', { attribute: 'data-val'});
this.setState({items: arr});
},
render: function() {
return <ul ref="root">
{_.map(this.state.items, this.render_item)}
</ul>
},
render_item: function(item) {
return <li data-val={item} key={item}>{item}</li>
}
});
var items = ['one', 'two', 'three', 'four'];
React.render(<Sortable items={items} />, document.querySelector('main'));
View Compiled
This Pen doesn't use any external CSS resources.