Skip to content

Commit 4a24291

Browse files
authored
Added drop-detection to examples (#541)
1 parent 006dabd commit 4a24291

File tree

2 files changed

+27
-0
lines changed

2 files changed

+27
-0
lines changed

example/example.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,21 @@ class App extends React.Component {
2828
onStop = () => {
2929
this.setState({activeDrags: --this.state.activeDrags});
3030
};
31+
onDrop = (e) => {
32+
this.setState({activeDrags: --this.state.activeDrags});
33+
if (e.target.classList.contains("drop-target")) {
34+
alert("Dropped!");
35+
e.target.classList.remove('hovered');
36+
}
37+
};
38+
onDropAreaMouseEnter = (e) => {
39+
if (this.state.activeDrags) {
40+
e.target.classList.add('hovered');
41+
}
42+
}
43+
onDropAreaMouseLeave = (e) => {
44+
e.target.classList.remove('hovered');
45+
}
3146

3247
// For controlled component
3348
adjustXPos = (e) => {
@@ -115,6 +130,12 @@ class App extends React.Component {
115130
<Draggable bounds={{top: -100, left: -100, right: 100, bottom: 100}} {...dragHandlers}>
116131
<div className="box">I can only be moved 100px in any direction.</div>
117132
</Draggable>
133+
<Draggable {...dragHandlers}>
134+
<div className="box drop-target" onMouseEnter={this.onDropAreaMouseEnter} onMouseLeave={this.onDropAreaMouseLeave}>I can detect drops from the next box.</div>
135+
</Draggable>
136+
<Draggable {...dragHandlers} onStop={this.onDrop}>
137+
<div className={`box ${this.state.activeDrags ? "no-pointer-events" : ""}`}>I can be dropped onto another box.</div>
138+
</Draggable>
118139
<div className="box" style={{height: '500px', width: '500px', position: 'relative', overflow: 'auto', padding: '0'}}>
119140
<div style={{height: '1000px', width: '1000px', padding: '10px'}}>
120141
<Draggable bounds="parent" {...dragHandlers}>

example/index.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,12 @@
5151
padding: 10px;
5252
float: left;
5353
}
54+
.no-pointer-events {
55+
pointer-events: none;
56+
}
57+
.hovered {
58+
background-color: gray;
59+
}
5460

5561

5662
/*

0 commit comments

Comments
 (0)