Как правильно настроить перетаскивание ручки перетаскивания в Framer Motion?

Question

Я хотел воспроизвести это руководство (https://www.youtube.com/watch?v=UMGnYRJuJog), в котором показано, как создать маркер перетаскивания во Framer X. Использованиеframer-motion, Я думал, что это сработало, но у меня появляется дополнительное пространство при перетаскивании, чего не должно происходить. Это может быть что-то сdisplay: flex но я не совсем уверен, делаю ли я что-то неправильно или это ошибка в framer-motion.

CodeSandbox воспроизведение

https://codesandbox.io/s/jolly-cerf-kh9o5

Действия по воспроизведению

Создайте две панели и ручку перетаскивания и сделайте так, чтобы ручка увеличивала ширину одной панели и вычитала из другой.

Ожидаемое поведение

Ручка должна тянуться и не иметь лишнего места. Он также должен следовать за мышью, чего не делает.

Воспроизведение видео

https://imgur.com/J2fUUWh.gif

Детали окружающей среды

Windows 10, Chrome

Answer 1

Хитрость здесь в том, чтобы сначала контролировать y положение, используя значение движения, затем используйте onPan событие (на ручке), чтобы установить значение этого движения.

function Example() {
  const containerY = useMotionValue(0)

  return (
    <motion.div style={{ y: containerY }}>
      <motion.div onPan={(e, info) => containerY.set(info.offset.y)}>
        Drag Me
      </motion.div>
      <div>Can't drag me</div>
    </motion.div>
  )
}