React 移动端拖拽实现-优快云博客

本文介绍了如何在React移动端应用中实现拖拽功能。通过结合CSS和HTML，利用React的状态管理和事件处理，详细阐述了创建可拖动组件的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码部分：

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

</head>

<style>

    .box{

        width:150px;

        height: 150px;

        background-color: gold;

        position: absolute;

        top: 0;

        left: 0;

    }

</style>

<body>

    <div id="root"></div>

</body>

<script src="./js/browser.js"></script>

<script src="./js/react.js"></script>

<script src="./js/react-dom.js"></script>

<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);

        }

        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>

                <div style={{left:this.state.x+"px",top:this.state.y+"px"}} className={"box"} onTouchStart={this.FnStart.bind(this)}></div>

                </div>) 

        }

    }

    ReactDOM.render(<Drag/>,root)

</script>

</html>

React移动端拖拽

代码部分：