2016-06-07 23:16:22 -04:00
|
|
|
import React, {Component} from 'react';
|
|
|
|
|
import {render} from 'react-dom';
|
2019-01-10 10:09:14 -05:00
|
|
|
import {sortableContainer, sortableElement} from 'react-sortable-hoc';
|
2019-03-13 17:15:00 -04:00
|
|
|
import arrayMove from 'array-move';
|
2016-06-07 23:16:22 -04:00
|
|
|
|
2019-01-10 10:09:14 -05:00
|
|
|
const SortableItem = sortableElement(({value}) => <li>{value}</li>);
|
2016-06-07 23:16:22 -04:00
|
|
|
|
2019-01-10 10:09:14 -05:00
|
|
|
const SortableContainer = sortableContainer(({children}) => {
|
|
|
|
|
return <ul>{children}</ul>;
|
2016-06-07 23:16:22 -04:00
|
|
|
});
|
|
|
|
|
|
2019-01-10 10:09:14 -05:00
|
|
|
class App extends Component {
|
2017-03-29 22:12:14 -04:00
|
|
|
state = {
|
|
|
|
|
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
|
|
|
|
|
};
|
2019-01-10 10:09:14 -05:00
|
|
|
|
2017-03-29 22:12:14 -04:00
|
|
|
onSortEnd = ({oldIndex, newIndex}) => {
|
2019-01-10 10:09:14 -05:00
|
|
|
this.setState(({items}) => ({
|
|
|
|
|
items: arrayMove(items, oldIndex, newIndex),
|
|
|
|
|
}));
|
2017-03-29 22:12:14 -04:00
|
|
|
};
|
2019-01-10 10:09:14 -05:00
|
|
|
|
2017-03-29 22:12:14 -04:00
|
|
|
render() {
|
2019-01-10 10:09:14 -05:00
|
|
|
const {items} = this.state;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<SortableContainer onSortEnd={this.onSortEnd}>
|
|
|
|
|
{items.map((value, index) => (
|
2019-08-23 08:51:55 -04:00
|
|
|
<SortableItem key={`item-${value}`} index={index} value={value} />
|
2019-01-10 10:09:14 -05:00
|
|
|
))}
|
|
|
|
|
</SortableContainer>
|
|
|
|
|
);
|
2017-03-29 22:12:14 -04:00
|
|
|
}
|
2016-06-07 23:16:22 -04:00
|
|
|
}
|
|
|
|
|
|
2019-01-10 10:09:14 -05:00
|
|
|
render(<App />, document.getElementById('root'));
|
