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