react+typescript（移动端）

最新推荐文章于 2022-08-17 07:53:56 发布

原创最新推荐文章于 2022-08-17 07:53:56 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #react.js

react 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何使用JavaScript和HTML创建一个可拖动的元素，通过监听touchstart、touchmove和touchend事件，实现元素的精确位置控制。关键代码展示了如何使用createRef和事件处理函数来实现元素的拖拽功能。

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

这是js+html的代码

import React, { Component, createRef } from "react";
import './index.less'
interface Props {


}
interface State {


}


class Drag2 extends Component<Props, State>{
    startX: number = 0
    startY: number = 0
    X: number = 0
    Y: number = 0
    dragElement = createRef<HTMLDivElement>()
    constructor(props: Props) {
        super(props)
        this.state = {


        }
    }
    Onstart(ev: React.TouchEvent<HTMLDivElement>): void {
        if (this.dragElement.current) {
            this.startX = ev.changedTouches[0].pageX - this.dragElement.current?.offsetLeft
            this.startY = ev.changedTouches[0].pageY - this.dragElement.current?.offsetTop
            document.ontouchmove = this.Amove.bind(this)
            document.ontouchend = this.Onend.bind(this)
        }
    }
    Amove(ev: TouchEvent): void {
        this.X = ev.changedTouches[0].pageX - this.startX
        this.Y = ev.changedTouches[0].pageY - this.startY
        if (this.dragElement.current) {
            this.dragElement.current.style.left = this.X + 'px'
            this.dragElement.current.style.top = this.Y + 'px'
        }
    }
    Onend() {
        document.ontouchmove = null
        document.ontouchend = null
    }


    render() {
        return (
            <div className='drag' ref={this.dragElement} onTouchStart={this.Onstart.bind(this)}></div>
        )
    }
}
export default Drag2

这是less的代码

.drag {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
}