Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"/></head>
<body>
<h1>Sortable Demo</h1>
<div id="demo"></div>
<div id="jsfooter">
<script src="https://fb.me/react-0.13.3.min.js"></script>
<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>
<script src="http://rubaxa.github.io/Sortable/react-sortable-mixin.js"></script>
<script src="sortable_demo.js"></script>
</div>
</body>
</html>
var UserList = React.createClass({
mixins: [SortableMixin],
sortableOptions: {
handle: ".my-handle"
},
getInitialState: function() {
return { items: this.props.names };
},
handleEnd: function(evt) {
var oidx = evt.oldIndex;
var nidx = evt.newIndex;
var item = this.state.items[nidx];
var next = this.state.items[nidx + 1];
console.log( item + ": " + oidx + " -> " + nidx + "; before " + next);
},
render: function() {
return <div>{
this.state.items.map(function (text, i) {
return <div index={i}><User idx={i} name={text} /></div>
})
}</div>
}
});
var User = React.createClass({
getInitialState: function() {
return { name: this.props.name,
idx: this.props.idx
};
},
render: function() {
return (<div><span className="my-handle"> :: </span>
<span>{this.props.name}</span></div>);
}
});
var names = ["Adela", "Bud", "Cate", "Davis", "Eric", "Hal", "Judy"];
React.render(<UserList names={names}/>, document.getElementById("demo"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment