1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
| import React from 'react';
| import DragSort from './index.js';
|
| export default class DragSortExample extends React.Component {
| constructor(props) {
| super(props);
| this.state = {
| list: [{
| name: 'title'
| }, {
| name: 'name'
| }, {
| name: 'code'
| }, {
| name: 'email'
| }],
| curMoveItem: null,
| index: '',
| dragged: false,
| }
| }
|
| handleDragMove = (data, from, to) => {
| this.setState({
| curMoveItem: to,
| list: data,
| index: null,
| });
| }
|
| handleDragEnd = (index) => {
| this.setState({
| curMoveItem: null,
| dragged: false,
| index,
| });
| }
|
| enter = (index) => {
| if (this.state.index !== null) {
| this.setState({
| index,
| });
| };
| }
|
| leave = () => {
| if (this.state.index !== null) {
| this.setState({
| index: '',
| });
| };
| }
|
| render() {
| const {
| dragged,
| } = this.state;
| const el = this.state.list.map((item, index) => {
| return (
| <div
| className={this.state.curMoveItem === index ? 'item active' : 'item'}
| onMouseEnter={this.enter.bind(this, index)}
| onMouseLeave={this.leave.bind(this, index)}
| style={{
| background: this.state.index === index ? 'red' : '#eee',
| }}
| key={item.name}>
| <div className="inner">{item.name}</div>
| </div>
| );
| });
| return (
| <div>
| <ul>
| <DragSort
| onDragEnd={this.handleDragEnd}
| onDragMove={this.handleDragMove}
| draggable={true}
| data={this.state.list}>
| {el}
| </DragSort>
| </ul>
| </div>
| );
| }
| }
|
|
