https://github.com/sortablejs/react-mixin-sortablejs
React mixin for SortableJS.
https://github.com/sortablejs/react-mixin-sortablejs
Last synced: 4 months ago
JSON representation
React mixin for SortableJS.
- Host: GitHub
- URL: https://github.com/sortablejs/react-mixin-sortablejs
- Owner: SortableJS
- Created: 2016-07-04T20:06:38.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-10-26T10:35:51.000Z (over 8 years ago)
- Last Synced: 2024-04-23T22:09:37.819Z (about 1 year ago)
- Size: 3.91 KB
- Stars: 27
- Watchers: 6
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# THIS PROJECT NEEDS A MAINTAINER.
---
react-mixin-sortablejs
-------------------
React mixin for [SortableJS](https://github.com/RubaXa/Sortable/).
Demo: http://rubaxa.github.io/Sortable/
### Support React
Include [react-sortable-mixin.js](react-sortable-mixin.js).
See [more options](react-sortable-mixin.js#L26).
```jsx
var SortableList = React.createClass({
mixins: [SortableMixin],
getInitialState: function() {
return {
items: ['Mixin', 'Sortable']
};
},
handleSort: function (/** Event */evt) { /*..*/ },
render: function() {
return
- {
- {text}
this.state.items.map(function (text, i) {
return
})
}
}
});
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
- {
- {text}
this.state.users.map(function (text, i) {
return
})
}
);
}
});
var ApprovedUsers = React.createClass({
mixins: [SortableMixin],
sortableOptions: { group: "shared" },
getInitialState: function() {
return { items: ['Hal', 'Judy'] };
},
render: function() {
return
- {
- {text}
this.state.items.map(function (text, i) {
return
})
}
}
});
ReactDOM.render(
```
### 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](https://facebook.github.io/react/docs/more-about-refs.html#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
Group 2
);
}
}
```