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<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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。