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; ReactDOM; //// Groups//var AllUsers = React; var ApprovedUsers = React; ReactDOM;
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
;; Component { // check if backing instance not null if componentBackingInstance let options = handle: ".group-title" // Restricts sort start click/touch to the specified element ; Sortable; }; { // check if backing instance not null if componentBackingInstance let options = draggable: "div" // Specifies which items inside the element should be sortable group: "shared" ; Sortable; }; { return <div className="container" ref=thissortableContainersDecorator> <div className="group"> <h2 className="group-title">Group 1</h2> <div className="group-list" ref=thissortableGroupDecorator> <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=thissortableGroupDecorator> <div>Swap them around</div> <div>Swap us around</div> <div>Swap things around</div> <div>Swap everything around</div> </div> </div> </div> ; }