Как остановить сброс ползунка влево при отпускании мыши (реакция-пружина, реакция-использование-жест)

Question

Кодовая песочница: https://codesandbox.io/s/draggable-image-gallery-3-59crp

Я использую react-use-gesture для создания горизонтального перетаскиваемого ползунка изображения.

Пока логика c у меня есть для перетаскивание -

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

, где, если пользователь нажимает кнопку мыши, ползунок будет translate влево или вправо в зависимости от значения движения mx. Как только пользователь отпускает go мыши, она возвращается к левой стороне: 0.

Соответствующий react-use-gesture документы: https://use-gesture.netlify.com/docs/state

Я попытался несколько попыток предотвратить сброс, заменив 0 на offset из API и т. Д. c., Но до сих пор я не понял лог c для предотвращения сброса.

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, а не отменять.