typescript+react實現移動端和PC端簡單拖拽效果
阿新 • • 發佈:2021-09-24
本文例項為大家分享了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: '內容一' },http://www.cppcns.com{ id: 'c2',text: '內容二' },{ www.cppcns.com 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-contewww.cppcns.comnt'>{item.text}</div>) } </div> ) } } export default Tab
2.程式碼
.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 + 'pxwww.cppcns.com' this.dragElement.current.style.top = this.y + 'px' } } FnUp() { document.onmousemove = null document.onmouseup = null } render() { return ( <div className="TextDrag" ref={thhttp://www.cppcns.comis.dragElement} onMouseDown={this.FnDown.bind(this)}> </div> ) } } export default TextDrag
2.css程式碼
.TextDrag{ position: absolute; width: 100px; height: 100px; background-color: red; }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。