如何阻止滑块在鼠标释放时重置到左侧(react-spring react-use-gesture)

Question

代码沙箱：https://codesandbox.io/s/draggable-image-gallery-3-59crp

我正在使用react-use-gesture创建一个水平可拖动的图像滑块。

到目前为止，我对拖拽的逻辑是

set({ x: down ? mx : 0 });

如果用户按下鼠标，滑块将根据mx移动值向左或向右移动。一旦用户松开鼠标，它就会重置回左侧：0。

相关react-use-gesture文档：https://use-gesture.netlify.com/docs/state

我多次尝试通过用API等中的offset替换0来阻止重置，但到目前为止我还没有弄清楚阻止重置的逻辑。

Answer 1

我是个新手-手势。我只是在玩你的代码。如果在useDrag中使用偏移而不是移动呢？

const bind = useDrag(
  ({ offset: [x], direction, distance, cancel }) => {
    set({x});

    // if user drags to the right for more than 350px, reset position back to 0
    if (direction[0] === 1 && distance > 350) {
      cancel();
      console.log("Please swipe left");
    }
  }
);

取消在这种情况下不起作用。你必须以某种方式将x设置为0，而不是使用cancel。