TypeScript 项目拖拽（移动端）

臭宝520

于 2021-12-10 14:00:14 发布

阅读量241

点赞数

文章标签： typescript javascript vue.js

本文链接：https://blog.youkuaiyun.com/xiao980522/article/details/121854711

版权

本文介绍如何在TypeScript项目中实现移动端的拖拽功能，适用于使用Vue.js框架的开发。通过阅读，你将了解到如何结合typescript和javascript处理触摸事件，实现组件的拖放操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.tex

import React, { Component, createRef } from "react";
import { connect } from 'react-redux';

import './index.less'
interface Props {

}
interface State {

}


class Drag extends Component<Props, State>{
  startX: number = 0
  startY: number = 0
  X: number = 0
  Y: number = 0
  dragElement = createRef<HTMLDivElement>()
  constructor(props: Props) {
      super(props)
      this.state = {

      }
  }
  FnStart(ev: React.TouchEvent<HTMLDivElement>): void {
      if (this.dragElement.current) {
          this.startX = ev.changedTouches[0].pageX - this.dragElement.current?.offsetLeft
          this.startY = ev.changedTouches[0].pageY - this.dragElement.current?.offsetTop
          document.ontouchmove = this.FnMove.bind(this)
          document.ontouchend = this.FnEnd.bind(this)
      }
  }
  FnMove(ev: TouchEvent): void {
      this.X = ev.changedTouches[0].pageX - this.startX
      this.Y = ev.changedTouches[0].pageY - this.startY
      if (this.dragElement.current) {
          this.dragElement.current.style.left = this.X + 'px'
          this.dragElement.current.style.top = this.Y + 'px'
      }
  }
  FnEnd() {
      document.ontouchmove = null
      document.ontouchend = null
  }



  render() {
      return (
          <div className='drag' ref={this.dragElement} onTouchStart={this.FnStart.bind(this)}>拖拽</div>
      )
  }
}



export default connect((props, state) => Object.assign({}, props, state), {})(Drag)

index.less

.drag {
    position: relative;
    // top: 0;
    // left: 0;
    color: #fff;
    width: 100px;
    height: 100px;
    font-size: 25px;
    background-color: red;
    text-align: center;
    line-height: 100px;
    border-radius: 50%;
    cursor: pointer;

}