THIS PROJECT NEEDS A MAINTAINER.

---

react-mixin-sortablejs
-------------------
React mixin for SortableJS.

Demo: http://rubaxa.github.io/Sortable/

$3

Include react-sortable-mixin.js.
See more options.

``jsx var SortableList = React.createClass({ mixins: [SortableMixin],

getInitialState: function() { return { items: ['Mixin', 'Sortable'] }; },

handleSort: function (/* Event /evt) { /../ },

render: function() { return

{
			this.state.items.map(function (text, i) {
				return {text}

			})
		}


	}
});
ReactDOM.render(, document.body);

//
// Groups
//
var AllUsers = React.createClass({
	mixins: [SortableMixin],
	sortableOptions: {
		ref: "user",
		group: "shared",
		model: "users"
	},
	getInitialState: function() {
		return { users: ['Abbi', 'Adela', 'Bud', 'Cate', 'Davis', 'Eric'] };
	},
	render: function() {
		return (

				Users

				{
					this.state.users.map(function (text, i) {
						return {text}

					})
				}

			

		);
	}
});
var ApprovedUsers = React.createClass({
	mixins: [SortableMixin],
	sortableOptions: { group: "shared" },
	getInitialState: function() {
		return { items: ['Hal', 'Judy'] };
	},
	render: function() {
		return 
{
			this.state.items.map(function (text, i) {
				return {text}

			})
		}

	}
});
ReactDOM.render(

	
	

	
, document.body);


$3

As mixins are not supported in ES2015 / TypeScript syntax here is example of ES2015 ref based implementation.
Using refs is the preferred (by facebook) "escape hatch" to underlaying DOM nodes: React: The ref Callback Attribute

`js import * as React from "react"; import Sortable from 'sortablejs';

export class SortableExampleEsnext extends React.Component {

sortableContainersDecorator = (componentBackingInstance) => { // check if backing instance not null if (componentBackingInstance) { let options = { handle: ".group-title" // Restricts sort start click/touch to the specified element }; Sortable.create(componentBackingInstance, options); } };

sortableGroupDecorator = (componentBackingInstance) => { // check if backing instance not null if (componentBackingInstance) { let options = { draggable: "div", // Specifies which items inside the element should be sortable group: "shared" }; Sortable.create(componentBackingInstance, options); } };

render() { return (


        
          Group 1

          
            Swap them around

            Swap us around

            Swap things around

            Swap everything around

          

        

        
          Group 2

          
            Swap them around

            Swap us around

            Swap things around

            Swap everything around


    );
  }
}