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

【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) => )}{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 = 0disY: number = 0x: number = 0y: number = 0dragElement = createRef()constructor(props: Props) {super(props)this.state = { }}FnDown(ev: React.MouseEvent) {if (this.dragElement.current) {this.disX = ev.clientX - this.dragElement.current?.getBoundingClientRect().leftthis.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.disXthis.y = ev.clientY - this.disYif (this.dragElement.current) {this.dragElement.current.style.left = this.x + 'px'this.dragElement.current.style.top = this.y + 'px'}}FnUp() {document.onmousemove = nulldocument.onmouseup = null}render() {return ( )}}export default TextDrag

2.css代码