react 滑块拖拽（移动端）

最新推荐文章于 2024-05-14 09:32:06 发布

秃顶的程序员.

最新推荐文章于 2024-05-14 09:32:06 发布

阅读量343

点赞数 1

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

本文链接：https://blog.csdn.net/aoliei/article/details/120003232

版权

react拖拽专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实习移动端小球拖拽

<!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: 100px;
            height: 100px;
            background: red;
            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="add"></div>
</body>
<script type="text/babel">
    let rooter = document.querySelector("#add");
 
    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;
 
            console.log(this.startX, this.startY);
 
            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.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>

秃顶的程序员.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
react 滑块拖拽（移动端）

实习移动端小球拖拽<!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"> .
复制链接

扫一扫