React拖拽（html里引入js版本）

燕京拾亿

已于 2022-03-18 09:30:27 修改

阅读量292

点赞数

文章标签： react.js javascript html5

于 2021-08-31 18:58:53 首次发布

本文链接：https://blog.csdn.net/m0_59074147/article/details/120024474

版权

<!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>

燕京拾亿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React拖拽（html里引入js版本）

<!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">.
复制链接

扫一扫