Необходимо установить границы для div с включенным перетаскиванием с помощью реакции-жеста и реагирования-пружины - PullRequest
Новая
       32

Необходимо установить границы для div с включенным перетаскиванием с помощью реакции-жеста и реагирования-пружины

1 голос
/ 25 сентября 2019

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

Нужно ли использовать метод интерполяции из пружины для установки этих границ или я должен добавить параметрык методу 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>
  );
}
...