SortableJS/react-mixin-sortablejs

THIS PROJECT NEEDS A MAINTAINER.

react-mixin-sortablejs

React mixin for SortableJS.

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

Support React

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

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

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

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

	render: function() {
		return <ul>{
			this.state.items.map(function (text, i) {
				return <li ref={i}>{text}</li>
			})
		}</ul>
	}
});

ReactDOM.render(<SortableList />, 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 (<div>
				<h1>Users</h1>
				<ul ref="user">{
					this.state.users.map(function (text, i) {
						return <li ref={i}>{text}</li>
					})
				}</ul>
			</div>
		);
	}
});

var ApprovedUsers = React.createClass({
	mixins: [SortableMixin],
	sortableOptions: { group: "shared" },

	getInitialState: function() {
		return { items: ['Hal', 'Judy'] };
	},

	render: function() {
		return <ul>{
			this.state.items.map(function (text, i) {
				return <li ref={i}>{text}</li>
			})
		}</ul>
	}
});

ReactDOM.render(<div>
	<AllUsers/>
	<hr/>
	<ApprovedUsers/>
</div>, document.body);

Support React ES2015 / TypeScript syntax

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

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 (
      <div className="container" ref={this.sortableContainersDecorator}>
        <div className="group">
          <h2 className="group-title">Group 1</h2>
          <div className="group-list" ref={this.sortableGroupDecorator}>
            <div>Swap them around</div>
            <div>Swap us around</div>
            <div>Swap things around</div>
            <div>Swap everything around</div>
          </div>
        </div>
        <div className="group">
          <h2 className="group-title">Group 2</h2>
          <div className="group-list" ref={this.sortableGroupDecorator}>
            <div>Swap them around</div>
            <div>Swap us around</div>
            <div>Swap things around</div>
            <div>Swap everything around</div>
          </div>
        </div>
      </div>
    );
  }
}