-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
69 lines (61 loc) · 1.9 KB
/
App.tsx
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
import * as React from "react"
import { DragDropContext, Droppable } from "react-beautiful-dnd"
import * as mobx from "mobx"
import { observer } from "mobx-react"
import DraggableInternal from "./DraggableInternal"
import "./App.scss"
@observer
export default class App extends React.Component {
@mobx.observable
items = {
dropPointA: [
{ id: "1", content: "abcd" },
{ id: "2", content: "123" },
{ id: "3", content: "abcd123" }
],
dropPointB: []
}
onDragEnd = result => {
if (!result.destination) {
// dropped outside the list
return
}
const startIndex = result.source.index
const endIndex = result.destination.index
const sourceArray = this.items[result.source.droppableId]
const destinationArray = this.items[result.destination.droppableId]
const [removed] = sourceArray.splice(startIndex, 1)
if (result.source.droppableId == result.destination.droppableId) {
sourceArray.splice(endIndex, 0, removed)
this.items[result.destination.droppableId] = sourceArray
} else {
destinationArray.splice(endIndex, 0, removed)
this.items[result.source.droppableId] = sourceArray
this.items[result.destination.droppableId] = destinationArray
}
}
render() {
return (
<DragDropContext onDragEnd={this.onDragEnd}>
<Droppable droppableId="dropPointA" direction="horizontal">
{(provided, snapshot) => (
<DraggableInternal
items={this.items.dropPointA}
provided={provided}
snapshot={snapshot}
/>
)}
</Droppable>
<Droppable droppableId="dropPointB">
{(provided, snapshot) => (
<DraggableInternal
items={this.items.dropPointB}
provided={provided}
snapshot={snapshot}
/>
)}
</Droppable>
</DragDropContext>
)
}
}