Skip to content

Commit 016bf21

Browse files
STRMLSTRML
committed
refactor(example): move to separate file
1 parent 8ae7eb2 commit 016bf21

File tree

2 files changed

+174
-171
lines changed

2 files changed

+174
-171
lines changed

‎example/example.js‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
var Draggable = window.ReactDraggable;
2+
3+
var App = React.createClass({
4+
getInitialState() {
5+
return {
6+
activeDrags: 0,
7+
deltaPosition: {
8+
x: 0, y: 0
9+
},
10+
controlledPosition: {
11+
x: -400, y: 200
12+
}
13+
};
14+
},
15+
16+
handleDrag(e, ui) {
17+
const {x, y} = this.state.deltaPosition;
18+
this.setState({
19+
deltaPosition: {
20+
x: x + ui.deltaX,
21+
y: y + ui.deltaY,
22+
}
23+
});
24+
},
25+
26+
onStart() {
27+
this.setState({activeDrags: ++this.state.activeDrags});
28+
},
29+
30+
onStop() {
31+
this.setState({activeDrags: --this.state.activeDrags});
32+
},
33+
34+
// For controlled component
35+
adjustXPos(e) {
36+
e.preventDefault();
37+
e.stopPropagation();
38+
const {x, y} = this.state.controlledPosition;
39+
this.setState({controlledPosition: {x: x - 10, y}});
40+
},
41+
42+
adjustYPos(e) {
43+
e.preventDefault();
44+
e.stopPropagation();
45+
const {controlledPosition} = this.state;
46+
const {x, y} = controlledPosition;
47+
this.setState({controlledPosition: {x, y: y - 10}});
48+
},
49+
50+
onControlledDrag(e, position) {
51+
const {x, y} = position;
52+
this.setState({controlledPosition: {x, y}});
53+
},
54+
55+
onControlledDragStop(e, position) {
56+
this.onControlledDrag(e, position);
57+
this.onStop();
58+
},
59+
60+
render() {
61+
const dragHandlers = {onStart: this.onStart, onStop: this.onStop};
62+
const {deltaPosition, controlledPosition} = this.state;
63+
return (
64+
<div>
65+
<h1>React Draggable</h1>
66+
<p>Active DragHandlers: {this.state.activeDrags}</p>
67+
<p>
68+
<a href="https://github.com/mzabriskie/react-draggable/blob/master/example/index.html">Demo Source</a>
69+
</p>
70+
<Draggable zIndex={100} {...dragHandlers}>
71+
<div className="box">I can be dragged anywhere</div>
72+
</Draggable>
73+
<Draggable axis="x" {...dragHandlers}>
74+
<div className="box cursor-x">I can only be dragged horizonally</div>
75+
</Draggable>
76+
<Draggable axis="y" {...dragHandlers}>
77+
<div className="box cursor-y">I can only be dragged vertically</div>
78+
</Draggable>
79+
<Draggable onStart={() => false}>
80+
<div className="box">I don't want to be dragged</div>
81+
</Draggable>
82+
<Draggable onDrag={this.handleDrag} {...dragHandlers}>
83+
<div className="box">
84+
<div>I track my deltas</div>
85+
<div>x: {deltaPosition.x.toFixed(0)}, y: {deltaPosition.y.toFixed(0)}</div>
86+
</div>
87+
</Draggable>
88+
<Draggable handle="strong" {...dragHandlers}>
89+
<div className="box no-cursor">
90+
<strong className="cursor"><div>Drag here</div></strong>
91+
<div>You must click my handle to drag me</div>
92+
</div>
93+
</Draggable>
94+
<Draggable cancel="strong" {...dragHandlers}>
95+
<div className="box">
96+
<strong className="no-cursor">Can't drag here</strong>
97+
<div>Dragging here works</div>
98+
</div>
99+
</Draggable>
100+
<Draggable {...dragHandlers} axis="y">
101+
<div className="box">I can only be dragged by the Y axis</div>
102+
</Draggable>
103+
<Draggable grid={[25, 25]} {...dragHandlers}>
104+
<div className="box">I snap to a 25 x 25 grid</div>
105+
</Draggable>
106+
<Draggable grid={[50, 50]} {...dragHandlers}>
107+
<div className="box">I snap to a 50 x 50 grid</div>
108+
</Draggable>
109+
<Draggable bounds={{top: -100, left: -100, right: 100, bottom: 100}} zIndex={5} {...dragHandlers}>
110+
<div className="box">I can only be moved 100px in any direction.</div>
111+
</Draggable>
112+
<div className="box" style={{height: '500px', width: '500px', position: 'relative', overflow: 'auto', padding: '0'}}>
113+
<div style={{height: '1000px', width: '1000px', padding: '10px'}}>
114+
<Draggable bounds="parent" {...dragHandlers}>
115+
<div className="box">
116+
I can only be moved within my offsetParent.<br /><br />
117+
Both parent padding and child margin work properly.
118+
</div>
119+
</Draggable>
120+
<Draggable bounds="parent" {...dragHandlers}>
121+
<div className="box">
122+
I also can only be moved within my offsetParent.<br /><br />
123+
Both parent padding and child margin work properly.
124+
</div>
125+
</Draggable>
126+
</div>
127+
</div>
128+
<Draggable bounds="body" {...dragHandlers}>
129+
<div className="box">
130+
I can only be moved within the confines of the body element.
131+
</div>
132+
</Draggable>
133+
<Draggable>
134+
<div className="box" style={{position: 'absolute', bottom: '100px', right: '100px'}} {...dragHandlers}>
135+
I already have an absolute position.
136+
</div>
137+
</Draggable>
138+
<Draggable defaultPosition={{x: 25, y: 25}} {...dragHandlers}>
139+
<div className="box">
140+
{"I have a default position of {x: 25, y: 25}, so I'm slightly offset."}
141+
</div>
142+
</Draggable>
143+
<Draggable zIndex={100} position={controlledPosition} {...dragHandlers} onDrag={this.onControlledDrag}>
144+
<div className="box">
145+
My position can be changed programmatically. <br />
146+
I have a drag handler to sync state.
147+
<p>
148+
<a href="#" onClick={this.adjustXPos}>Adjust x ({controlledPosition.x})</a>
149+
</p>
150+
<p>
151+
<a href="#" onClick={this.adjustYPos}>Adjust y ({controlledPosition.y})</a>
152+
</p>
153+
</div>
154+
</Draggable>
155+
<Draggable zIndex={100} position={controlledPosition} {...dragHandlers} onStop={this.onControlledDragStop}>
156+
<div className="box">
157+
My position can be changed programmatically. <br />
158+
I have a dragStop handler to sync state.
159+
<p>
160+
<a href="#" onClick={this.adjustXPos}>Adjust x ({controlledPosition.x})</a>
161+
</p>
162+
<p>
163+
<a href="#" onClick={this.adjustYPos}>Adjust y ({controlledPosition.y})</a>
164+
</p>
165+
</div>
166+
</Draggable>
167+
168+
</div>
169+
);
170+
}
171+
});
172+
173+
ReactDOM.render(<App/>, document.getElementById('container'));

‎example/index.html‎

Lines changed: 1 addition & 171 deletions
Original file line numberDiff line numberDiff line change
@@ -59,176 +59,6 @@
5959
<script src="//unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
6060
<script src="//cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.min.js"></script>
6161
<script src="../dist/react-draggable.js"></script>
62-
<script type="text/babel">
63-
var Draggable = ReactDraggable;
64-
var App = React.createClass({
65-
getInitialState: function () {
66-
return {
67-
activeDrags: 0,
68-
deltaPosition: {
69-
x: 0, y: 0
70-
},
71-
controlledPosition: {
72-
x: -400, y: 200
73-
}
74-
};
75-
},
76-
77-
handleDrag: function (e, ui) {
78-
const {x, y} = this.state.deltaPosition;
79-
this.setState({
80-
deltaPosition: {
81-
x: x + ui.deltaX,
82-
y: y + ui.deltaY,
83-
}
84-
});
85-
},
86-
87-
onStart: function() {
88-
this.setState({activeDrags: ++this.state.activeDrags});
89-
},
90-
91-
onStop: function() {
92-
this.setState({activeDrags: --this.state.activeDrags});
93-
},
94-
95-
// For controlled component
96-
adjustXPos: function(e) {
97-
e.preventDefault();
98-
e.stopPropagation();
99-
const {x, y} = this.state.controlledPosition;
100-
this.setState({controlledPosition: {x: x - 10, y}});
101-
},
102-
103-
adjustYPos: function(e) {
104-
e.preventDefault();
105-
e.stopPropagation();
106-
const {controlledPosition} = this.state;
107-
const {x, y} = this.state.controlledPosition;
108-
this.setState({controlledPosition: {x, y: y - 10}});
109-
},
110-
111-
onControlledDrag: function(e, position) {
112-
const {x, y} = position;
113-
this.setState({controlledPosition: {x, y}});
114-
},
115-
116-
onControlledDragStop: function(e, position) {
117-
const {x, y} = position;
118-
this.setState({controlledPosition: {x, y}});
119-
},
120-
121-
render: function () {
122-
const dragHandlers = {onStart: this.onStart, onStop: this.onStop};
123-
const {deltaPosition, controlledPosition} = this.state;
124-
return (
125-
<div>
126-
<h1>React Draggable</h1>
127-
<p>Active DragHandlers: {this.state.activeDrags}</p>
128-
<p>
129-
<a href="https://github.com/mzabriskie/react-draggable/blob/master/example/index.html">Demo Source</a>
130-
</p>
131-
<Draggable zIndex={100} {...dragHandlers}>
132-
<div className="box">I can be dragged anywhere</div>
133-
</Draggable>
134-
<Draggable axis="x" {...dragHandlers}>
135-
<div className="box cursor-x">I can only be dragged horizonally</div>
136-
</Draggable>
137-
<Draggable axis="y" {...dragHandlers}>
138-
<div className="box cursor-y">I can only be dragged vertically</div>
139-
</Draggable>
140-
<Draggable onStart={() => false}>
141-
<div className="box">I don't want to be dragged</div>
142-
</Draggable>
143-
<Draggable onDrag={this.handleDrag} {...dragHandlers}>
144-
<div className="box">
145-
<div>I track my deltas</div>
146-
<div>x: {deltaPosition.x.toFixed(0)}, y: {deltaPosition.y.toFixed(0)}</div>
147-
</div>
148-
</Draggable>
149-
<Draggable handle="strong" {...dragHandlers}>
150-
<div className="box no-cursor">
151-
<strong className="cursor"><div>Drag here</div></strong>
152-
<div>You must click my handle to drag me</div>
153-
</div>
154-
</Draggable>
155-
<Draggable cancel="strong" {...dragHandlers}>
156-
<div className="box">
157-
<strong className="no-cursor">Can't drag here</strong>
158-
<div>Dragging here works</div>
159-
</div>
160-
</Draggable>
161-
<Draggable grid={[25, 25]} {...dragHandlers}>
162-
<div className="box">I snap to a 25 x 25 grid</div>
163-
</Draggable>
164-
<Draggable grid={[50, 50]} {...dragHandlers}>
165-
<div className="box">I snap to a 50 x 50 grid</div>
166-
</Draggable>
167-
<Draggable bounds={{top: -100, left: -100, right: 100, bottom: 100}} zIndex={5} {...dragHandlers}>
168-
<div className="box">I can only be moved 100px in any direction.</div>
169-
</Draggable>
170-
<div className="box" style={{height: '500px', width: '500px', position: 'relative', overflow: 'auto', padding: '0'}}>
171-
<div style={{height: '1000px', width: '1000px', padding: '10px'}}>
172-
<Draggable bounds="parent" {...dragHandlers}>
173-
<div className="box">
174-
I can only be moved within my offsetParent.<br /><br />
175-
Both parent padding and child margin work properly.
176-
</div>
177-
</Draggable>
178-
<Draggable bounds="parent" {...dragHandlers}>
179-
<div className="box">
180-
I also can only be moved within my offsetParent.<br /><br />
181-
Both parent padding and child margin work properly.
182-
</div>
183-
</Draggable>
184-
</div>
185-
</div>
186-
<Draggable bounds="body" {...dragHandlers}>
187-
<div className="box">
188-
I can only be moved within the confines of the body element.
189-
</div>
190-
</Draggable>
191-
<Draggable>
192-
<div className="box" style={{position: 'absolute', bottom: '100px', right: '100px'}} {...dragHandlers}>
193-
I already have an absolute position.
194-
</div>
195-
</Draggable>
196-
<Draggable defaultPosition={{x: 25, y: 25}} {...dragHandlers}>
197-
<div className="box">
198-
{"I have a default position of {x: 25, y: 25}, so I'm slightly offset."}
199-
</div>
200-
</Draggable>
201-
<Draggable zIndex={100} position={controlledPosition} {...dragHandlers} onDrag={this.onControlledDrag}>
202-
<div className="box">
203-
My position can be changed programmatically. <br />
204-
I have a drag handler to sync state.
205-
<p>
206-
<a href="#" onClick={this.adjustXPos}>Adjust x ({controlledPosition.x})</a>
207-
</p>
208-
<p>
209-
<a href="#" onClick={this.adjustYPos}>Adjust y ({controlledPosition.y})</a>
210-
</p>
211-
</div>
212-
</Draggable>
213-
<Draggable zIndex={100} position={controlledPosition} {...dragHandlers} onStop={this.onControlledDragStop}>
214-
<div className="box">
215-
My position can be changed programmatically. <br />
216-
I have a dragStop handler to sync state.
217-
<p>
218-
<a href="#" onClick={this.adjustXPos}>Adjust x ({controlledPosition.x})</a>
219-
</p>
220-
<p>
221-
<a href="#" onClick={this.adjustYPos}>Adjust y ({controlledPosition.y})</a>
222-
</p>
223-
</div>
224-
</Draggable>
225-
226-
</div>
227-
);
228-
}
229-
});
230-
231-
ReactDOM.render(<App/>, document.getElementById('container'));
232-
</script>
62+
<script type="text/babel" src="../example/example.js"></script>
23363
</body>
23464
</html>

0 commit comments

Comments
 (0)