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