React+tsx实现拖拽效果 (PC端+移动端)

wpb1109

于 2021-09-16 19:11:15 发布

阅读量509

点赞数

文章标签： react.js

本文链接：https://blog.csdn.net/wpb1109/article/details/120335481

版权

本文介绍了如何使用 React 和 tsx 在PC端及移动端实现拖拽效果。分别展示了针对不同平台的tsx代码段和对应的CSS样式，详细解释了实现拖拽功能的步骤和技术要点。

摘要由CSDN通过智能技术生成

PC端

tsx代码

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

}
interface State {

}
class Drag extends Component<Props, State> {
    disX: number = 0;
    disY: number = 0;
    dragElement = createRef<HTMLDivElement>();
    x: number = 0;
    y: number = 0;
    constructor(props: Props) {
        super(props)

        this.state = {}
    }
    FnDown(ev: React.MouseEvent) {
        if (this.dragElement.current) {
            this.disX = ev.clientX - this.dragElement.current?.getBoundingClientRect().left;
            this.disY = ev.clientY - this.dragElement.current?.getBoundingClientRect().top;
            console.log(this.disX, this.disY, 1111);

        }

        document.onmousemove = this.FnMove.bind(this);
        document.onmouseup = this.FnUp;

        ev.preventDefault && ev.preventDefault();