用 react hook 写拖拽

最新推荐文章于 2024-06-01 14:58:11 发布

樱颜

最新推荐文章于 2024-06-01 14:58:11 发布

阅读量258

点赞数 2

文章标签： react.js

本文链接：https://blog.csdn.net/weixin_58160355/article/details/125254378

版权

tsx:

import { useRef, useEffect, useState } from 'react'
import './hoolone.less'
interface iPosition {
  x: number;
  y: number;
}
export default function Shopping() {
  const Box = useRef<HTMLDivElement>(null)
  let DisX: number = 0
  let DisY: number = 0
  let X: number = 0
  let Y: number = 0
  const [positions, SetPosition] = useState<iPosition>({ x: 0, y: 0 })
  const getBox = () => {
    return Box.current as HTMLDivElement
  }
  const FnEnd = () => {
    document.ontouchmove = null
    document.ontouchend = null
  }
  const FnMove = (ev: TouchEvent) => {
    X = ev.changedTouches[0].pageX - DisX
    Y = ev.changedTouches[0].pageY - DisY
    SetPosition({ x: X, y: Y })
  }
  const FnStart = (ev: TouchEvent) => {
    DisX = ev.changedTouches[0].pageX - getBox().offsetLeft
    DisY = ev.changedTouches[0].pageY - getBox().offsetTop
    document.o