-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathreact_4.html
91 lines (78 loc) · 2.62 KB
/
react_4.html
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
88
89
90
91
<!DOCTYPE html>
<head>
<title>index</title>
<script type = 'text/javascript' src = 'bower_components/react/react.js'></script>
<script type = 'text/javascript' src = 'bower_components/react/react-dom.js'></script>
<script type = 'text/javascript' src = 'bower_components/babel/browser.js'></script>
<style>
*{margin:0;padding:0}
.dragNode{height:200px;width:200px;background:red;position: absolute;}
</style>
</head>
<body>
<div id='root'>
</div>
<!-- <script type= 'text/babel'>
class InputChange extends React.Component{
constructor(){
super();
this.state ={
msg:''
}
}
render(){
return (
<div>
<input type='text' onChange={this.change.bind(this)} ref='root'/>
<div>{this.state.msg}</div>
</div>
)
}
change(){
console.log(this.refs['root'])
this.setState (
{
msg:this.refs['root'].value
}
)
}
}
ReactDOM.render(<InputChange/>,root)
</script> -->
<script type='text/babel'>
class Drag extends React.Component{
constructor(){
super();
this.state = {
needX:0,
needY:0,
};
this.disX = 0
this.disY = 0
}
render(){
return(<div className = 'dragNode' style={{left:this.state.needX,top:this.state.needY}} onMouseDown={this.fnDown.bind(this)}>
</div>)
}
fnDown(e){
console.log(e)
this.disX = e.clientX - e.target.offsetLeft;
this.disY = e.clientY - e.target.offsetTop;
document.onmousemove = this.fnMove.bind(this);
document.onmouseup = this.fnUp.bind(this)
}
fnMove(e){
this.setState({
needX :e.clientX - this.disX,
needY :e.clientY - this.disY
})
console.log(this.disX,this.disY,this.state.needX,this.state.needY)
}
fnUp(){
document.onmousemove=null;
document.onmouseup = null;
}
}
ReactDOM.render(<Drag/>,root)
</script>
</body>