React mixin for SortableJS.
Latest commit 3d8ef20 Jul 6, 2016 1 @RubaXa RubaXa v0.1.1
Permalink
Failed to load latest commit information.
.editorconfig v0.1.1 Jul 4, 2016
.gitignore v0.1.1 Jul 4, 2016
README.md v0.1.1 Jul 6, 2016
package.json v0.1.1 Jul 6, 2016
react-mixin-sortable.js v0.1.1 Jul 6, 2016

README.md

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>
    );
  }
}