reactjs - 如何在 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

环境细节

视窗 10、铬

Answer 1

The trick here is to first control the container's y position using a motion value, then use an onPan event (on the handle) to set that motion value's value.

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>
  )
}