<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/browser.js"></script>
<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<style>
.drag {
position: absolute;
width: 120px;
height: 120px;
background: red;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
const root=document.querySelector('#root');
class Drag extends React.Component{
constructor(...args){
super(...args);
this.state={
x:0,
y:0
}
}
FnStart(ev){
this.pageX=ev.changedTouches[0].pageX-ev.target.offsetLeft;
this.pageY=ev.changedTouches[0].pageY-ev.target.offsetTop;
document.ontouchmove=this.FnMove.bind(this);
document.ontouchend=this.FnEnd.bind(this);
// ev.preventDefault && ev.preventDefault();
}
FnMove(ev){
this.X=ev.changedTouches[0].pageX-this.pageX;
this.Y=ev.changedTouches[0].pageY-this.pageY;
this.setState({
x:this.X,
y:this.Y
})
}
FnEnd(){
document.ontouchmove=null;
document.ontouchend=null;
}
render(){
return (
<div className='box'>
<div className='drag' style={{left:this.state.x+'px',top:this.state.y}} onTouchStart={this.FnStart.bind(this)}></div>
</div>
)
}
}
ReactDOM.render(<Drag/>,root)
</script>
</html>
React拖拽(html里引入js版本)
于 2021-08-31 18:58:53 首次发布