1 | import React, {Component} from 'react';
|
2 | import {render} from 'react-dom';
|
3 | import {sortableContainer, sortableElement} from 'react-sortable-hoc';
|
4 | import arrayMove from 'array-move';
|
5 |
|
6 | const SortableItem = sortableElement(({value}) => <li>{value}</li>);
|
7 |
|
8 | const SortableContainer = sortableContainer(({children}) => {
|
9 | return <div>{children}</div>;
|
10 | });
|
11 |
|
12 | class App extends Component {
|
13 | state = {
|
14 | collections: [[0, 1, 2], [0, 1, 2, 3, 4], [0, 1, 2]],
|
15 | };
|
16 |
|
17 | onSortEnd = ({oldIndex, newIndex, collection}) => {
|
18 | this.setState(({collections}) => {
|
19 | const newCollections = [...collections];
|
20 |
|
21 | newCollections[collection] = arrayMove(
|
22 | collections[collection],
|
23 | oldIndex,
|
24 | newIndex,
|
25 | );
|
26 |
|
27 | return {collections: newCollections};
|
28 | });
|
29 | };
|
30 |
|
31 | render() {
|
32 | const {collections} = this.state;
|
33 |
|
34 | return (
|
35 | <SortableContainer onSortEnd={this.onSortEnd}>
|
36 | {collections.map((items, index) => (
|
37 | <React.Fragment key={index}>
|
38 | <strong>LIST {index}</strong>
|
39 | <ul>
|
40 | {items.map((item, i) => (
|
41 | <SortableItem
|
42 | key={item}
|
43 | value={`Item ${item}`}
|
44 | index={i}
|
45 | collection={index}
|
46 | />
|
47 | ))}
|
48 | </ul>
|
49 | </React.Fragment>
|
50 | ))}
|
51 | </SortableContainer>
|
52 | );
|
53 | }
|
54 | }
|
55 |
|
56 | render(<App />, document.getElementById('root'));
|
57 |
|
\ | No newline at end of file |