Make list like component sortable
npm install react-sortable-mixinreact-sortable-mixin
====================
A mixin for React to creat a sortable(drag and move) List Component.
Demo
npm install --save-dev react-sortable-mixin
- Define a List Component use ListMixin contains Item Components use ItemMixin.
- List Component required state items to set items' data.
- Item Component required props:
key / index / movableProps.
That's it!
Example code:
``javascript
var React = require('react');
var sortable = require('react-sortable-mixin');
// Item Component use ItemMixin
var Item = React.createClass({
mixins: [sortable.ItemMixin],
render: function() {
return
}
});
// List Component use ListMixinitems
var List = React.createClass({
mixins: [sortable.ListMixin],
componentDidMount: function() {
// Set items' data, key name required
this.setState({ items: this.props.items });
},
render: function() {
var items = this.state.items.map(function(item, i) {
// Required props in Item (key/index/movableProps)
return
}, this);
return
module.exports = List;
`
- onMoveBefore: after mousedown before mousemoveonResorted
- : if items not resorted (drop at same position) will not triggeronMoveEnd`
-