<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test01</title>
<script src="build/browser.min.js"></script>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/jquery.js"></script>
<style media="screen">
.box{ 100px;
height: 100px;
background: gray;
position: absolute;
}
</style>
<script type="text/babel">
class Drag extends React.Component{
constructor(...args){
super(...args);
this.state={x:0,y:0};
}
fn(ev){
var disX=ev.pageX-this.state.x;
var disY=ev.pageY-this.state.y;
var _this=this;
document.onmousemove=function(ev){
_this.setState({
x:ev.pageX-disX,
y:ev.pageY-disY
});
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
}
render(){
return <div className="box" style={{left:this.state.x+'px',top:this.state.y+'px'}} onMouseDown={this.fn.bind(this)}>
</div>
}
}
$(function(){
ReactDOM.render(
<Drag/>,
$('blue-view')[0]
);
});
</script>
</head>
<body>
<blue-view></blue-view>
</body>
</html>