c/c++开发分享typescript+react实现移动端和PC端简单拖拽效果

本文实例为大家分享了typescript+react实现移动端和pc端简单拖拽效果的具体代码,供大家参考,具体内容如下一、移动端1.tsx代码import { component } from “re

c/c++开发分享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;  }

以上就是c/c++开发分享typescript+react实现移动端和PC端简单拖拽效果的全部内容,希望对大家的学习有所帮助,也希望大家多多支持<猴子技术宅>。

需要了解更多c/c++开发分享typescript+react实现移动端和PC端简单拖拽效果,都可以关注C/C++技术分享栏目—猴子技术宅(www.ssfiction.com)

本文来自网络收集,不代表猴子技术宅立场,如涉及侵权请点击右边联系管理员删除。

如若转载,请注明出处:https://www.ssfiction.com/c-cyuyankaifa/834264.html

发表评论

邮箱地址不会被公开。 必填项已用*标注