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<Props, State>{
    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 (
            <div className='tab'>
                {
                    this.state.ButtonArray.map((item, index) => <button key={item.id} onClick={this.FnTab.bind(this, index)} className={this.state.ButtonIndex === index ? 'tab-button ac' : 'tab-button'}>{item.text}</button>)
                }
                {
                    this.state.ContentArray.map((item, index) => <div key={item.id} style={{display:this.state.ButtonIndex===index?'block':'none'}} className='tab-content'>{item.text}</div>)
                }
 
            </div>
        )
    }
}
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<HTMLDivElement>()
  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 (
      <div className="TextDrag" ref={this.dragElement} onMouseDown={this.FnDown.bind(this)}>  </div>
 
 
    )
  }
}

export default TextDrag

2.css代碼

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

關于“typescript和react如何實現移動端和PC端簡單拖拽效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。