reactjs - 需要使用 react-gesture 和 react-spring 为 div 设置边界并启用拖动

Question

我正在使用react-use-gesture包在拖动事件上移动 div，但需要设置边界。

我是否需要使用 spring 中的 interpolate 方法来设置这些边界，还是应该向该useSpring().set方法添加参数？

没有速度，没问题，但我需要useSpring().set方法上的速度参数

沙盒

import { useSpring, interpolate, animated, config } from "react-spring";
import { useDrag } from "react-use-gesture";

export default function App() {
  const [{ pos }, set] = useSpring(() => ({ pos: [0, 0] }));
  const bind = useDrag(
    ({
      xy,
      previous,
      down,
      movement,
      direction,
      velocity,
      memo = pos.getValue()
    }) => {
      set({
        pos: add(movement, memo),
        immediate: down,
        config: {
          clamp: true,
          velocity: scale(direction, velocity),
          decay: true
        }
      });
      return memo;
    }
  );
  return (
    <animated.div
      {...bind()}
      className={"mydiv"}
      style={{
        transform: pos.interpolate(x => `translateX(${x}px)`)
      }}
    >

    </animated.div>
  );
}