资源分类

react-use-gesture是一个钩子，可以将更丰富的鼠标和触摸事件绑定到任何组件或视图。使用您收到的数据，设置手势变得微不足道，并且通常只需要几行代码。  

简单的例子

示例使div拖拽成为可拖动，以便在拖动时跟随鼠标，并在发布时返回其初始位置。

import { useSpring, animated } from 'react-spring'
import { useDrag } from 'react-use-gesture'

function PullRelease() {
  const [{ xy }, set] = useSpring(() => ({ xy: [0, 0] }))

  // 1. Define the gesture
  const bind = useDrag(({ down, delta }) => set({ xy: down ? delta : [0, 0] }))

  return (
    <animated.div
      // 2. Bind it to a component
      {...bind()}
      style={{ transform: xy.interpolate((x, y) => `translate3D(${x}px, ${y}px, 0)`) }} />

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/2619