typescript和react如何实现移动端和PC端简单拖拽效果

这篇文章将为大家详细讲解有关typescript和react如何实现移动端和PC端简单拖拽效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

具体内容如下

一、移动端

1.tsx代码

import { Component } from "react";import './Tab.less'interface Props { }interface user {    id: string,    text: string}interface content {    id: string,    text: string}interface State {    ButtonIndex: number,    ButtonArray: user[],    ContentArray: content[]}class Tab extends Component{    constructor(props: Props) {        super(props)        this.state = {            ButtonIndex: 0,            ButtonArray: [                {                    id: '01',                    text: '按钮一'                },                {                    id: '02',                    text: '按钮二'                },                {                    id: '03',                    text: '按钮三'                }            ],            ContentArray: [                {                    id: 'c1',                    text: '内容一'                },                {                    id: 'c2',                    text: '内容二'                },                {                    id: 'c3',                    text: '内容三'                }            ],        }    }    FnTab(index: number):void {        this.setState({            ButtonIndex: index        })    }    render() {        return (            
                {                    this.state.ButtonArray.map((item, index) => {item.text})                }                {                    this.state.ContentArray.map((item, index) => 
{item.text}
)                }             
        )    }}export default Tab

2.css代码

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

二、PC端

1.tsx代码

import { Component, createRef } from 'react'import './index.less'interface Props {  }interface State {  }class TextDrag extends Component {  disX: number = 0  disY: number = 0  x: number = 0  y: number = 0  dragElement = createRef()  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.disX = ev.clientY - this.dragElement.current?.getBoundingClientRect().top    }    _document.onmousemove = this.FnMove.bind(this)    _document.onmouseup = this.FnUp  }  FnMove(ev: MouseEvent) {    this.x = ev.clientX - this.disX    this.y = ev.clientY - this.disY    if (this.dragElement.current) {      this.dragElement.current.style.left = this.x + 'px'      this.dragElement.current.style.top = this.y + 'px'    }  }  FnUp() {    _document.onmousemove = null    _document.onmouseup = null  }  render() {    return (      
  
      )  }}export default TextDrag

2.css代码

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

关于"typescript和react如何实现移动端和PC端简单拖拽效果"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。