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; }
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- 使用React組件編寫溫度顯示器
- 使用react-color實現前端取色器的方法
- React插槽使用方法
- React中immutable的UI組件渲染性能詳解
- 代碼解析React中setState同步和異步問題