useDragControls

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

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

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

用法

从 Motion 导入 useDragControls

import { useDragControls } from "motion-v"

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

<script setup>
import { useDragControls, motion } from 'motion-v'

const controls = useDragControls()
</script>

<template>
  <motion.div drag :drag-controls="controls" />
</template>

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

<template>
  <div @pointerdown="(event) => controls.start(event)" />
</template>

触摸支持

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

<template>
  <div 
    @pointerdown="startDrag" 
    style="touch-action: none"
  />
</template>

捕捉到光标

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

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

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

禁用自动拖拽

通过此配置，motion 组件仍然会在收到 pointerdown 事件时自动启动拖拽手势。

我们可以通过传递 :dragListener="false" 属性来停止此行为。

<template>
  <motion.div
    drag
    :drag-listener="false"
    :drag-controls="controls"
  />
</template>