llaisdy/sortable_demo.html

## sortable_demo.html
<!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>

## sortable_demo.jsx
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"));
	<!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"));