react写拖拽移动端的

最新推荐文章于 2024-09-27 09:00:00 发布

@Programmer

最新推荐文章于 2024-09-27 09:00:00 发布

阅读量154

点赞数

分类专栏： react拖拽文章标签： react.js javascript html5

本文链接：https://blog.youkuaiyun.com/weixin_59097751/article/details/120003423

版权

react拖拽专栏收录该内容

1 篇文章

订阅专栏

这是代码：复制就可以用哦

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    
        .smallball {
            position: absolute;
            top: 0;
            left: 0;
 
            width: 50px;
            height: 50px;
            background: rgb(12, 238, 50);
            border-radius: 50%;
        }

    </style>
    <script src="./js/browser.js"></script>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
</head>
 
<body>
    <div id="ball"></div>
</body>
<script type="text/babel">
    let rooter = document.querySelector("#ball");
 
    class Drag extends React.Component {
        constructor(...arge) {
            super(...arge);
        }
        FnStart(ev) {
            console.log(11)
            this.Touch = ev.changedTouches[0];
            this.Target = ev.target;
            this.startX = this.Touch.pageX - this.Target.offsetLeft;
            this.startY = this.Touch.pageY - this.Target.offsetTop;
 
      
 
            document.ontouchmove = this.FnMove.bind(this);
            document.ontouchend = this.FnEnd.bind(this);
 
            // ev.preventDefault && ev.preventDefault();
        }
        FnMove(ev) {
            this.Touch = ev.changedTouches[0];
            this.X = this.Touch.pageX - this.startX;
            this.Y = this.Touch.pageY - this.startY;
            this.oW=ev.target.parentNode.offsetWidth - ev.target.offsetWidth
            if (this.X<0) {
                this.X=0      
            }
            if (this.X>this.oW) {
                this.X=this.oW
            }
 
 
 
            this.Target.style.left = this.X + 'px';
        
            this.Target.style.top = this.Y + 'px';
        }
        FnEnd(ev) {
            document.ontouchmove = null;
            document.ontouchend = null;
        }
        render() {
            return (<div className='smallball' onTouchStart={this.FnStart.bind(this)}></div>)
        }
    }
 
    ReactDOM.render(<Drag />, rooter);
</script>
 
</html