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

这篇文章主要为大家详细介绍了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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持3399IT网。

本文为网络共享文章，如有侵权请联系邮箱485837881@qq.com