如何在Framer中使拖动手柄正确拖动？

Question

我想复制这个教程(https://www.youtube.com/watch?v=UMGnYRJuJog)，它展示了如何在Framer中创建一个拖动句柄。使用framer-motion，我认为它有效，但是在拖动时我得到了额外的空间，这是不应该发生的。这可能与display: flex有关，但我不完全确定，是做错了什么，还是framer-motion.中的bug

CodeSandbox reproduction

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