脚本宝典收集整理的这篇文章主要介绍了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代码
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端简单拖拽效果全部内容，希望文章能够帮你解决typescript+react实现移动端和PC端简单拖拽效果所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。