useDragControls

通常，拖拽是通过按下一个motion带有dragprop属性的组件，然后移动指针来启动的。

对于某些用例，例如在视频进度条上的任意点点击，我们可能希望从不同的元素启动拖拽。

通过 useDragControls，我们可以创建一组控件，以从任何指针事件手动开始拖拽。

用法

从 Motion 导入 useDragControls

import { useDragControls } from "motion/react"

useDragControls 返回可以传递给可拖拽的 motion 组件的拖拽控件

const controls = useDragControls()

return <motion.div drag dragControls={controls} />

现在我们可以通过 start 方法从任何其他元素的 onPointerDown 事件启动拖拽会话。

<div onPointerDown={event => controls.start(event)} />

触摸支持

为了支持触摸屏，触发元素应该应用 touch-action: none 样式。

<div onPointerDown={startDrag} style={{ touchAction: "none" }} />

吸附到光标

默认情况下，拖拽手势只会对指针位置应用更改。

我们还可以通过将 snapToCursor: true 传递给 start 方法，使 motion 组件立即吸附到光标。

controls.start(event, { snapToCursor: true })

禁用自动拖拽

在这种配置下，当 motion 组件自身接收到 pointerdown 事件时，它仍然会自动启动拖拽手势。

我们可以通过传递 dragListener={false} prop 来阻止这种行为。

<motion.div
  drag
  dragListener={false}
  dragControls={controls}
/>