--- title: "传感器与程序化拖拽" description: "输入如何变成拖拽——指针和键盘传感器、激活约束、canDrag、自定义传感器，以及用 @vue-dnd-kit/actions 编写脚本驱动的拖拽。" canonical_url: "https://zizigy.github.io/vue-dnd-kit/zh/docs/guides/sensors" --- > Index of every page on this site: [llms.txt](https://zizigy.github.io/vue-dnd-kit/llms.txt) 传感器把输入变成拖拽。它只告诉 provider“从这里拖拽这个项”，然后告诉它输入移动到了哪里，以及是放下了还是取消了。其余的都由 provider 完成，对每个传感器都一样：一次一个拖拽、拒绝禁用的项、激活约束、排序、自动滚动、播报、:kbd{value="Escape"} 以及整个放置过程。 ## 内置传感器
传感器 输入
pointerSensor 通过 Pointer Events 处理鼠标、触摸和触控笔。它会捕获指针，防止页面在触摸拖拽时选中文本或滚动，并吞掉拖拽之后的那次点击。
keyboardSensor 和 拿起和放下，方向键移动，:kbd{value="Escape"} 取消——任何拖拽都可以，指针拖拽也一样。
两者默认都会运行。provider 的 `sensors` 会替换这个列表： ```vue ``` 要关闭键盘拖拽，优先使用 `:keyboard="false"`，而不是去掉 `keyboardSensor`：键盘传感器同时也负责用 取消任何拖拽。它的按键可以用 `keyboard.keys` 重新绑定（见[无障碍](https://zizigy.github.io/docs/guides/accessibility#the-keyboard)）。 ## 激活约束 按下不会立刻开始拖拽：它会等待激活约束满足，这样点击仍然是点击，滑动仍然可以滚动页面。切换这个列表的规则，然后按住一行： 约束有三个字段：
字段 拖拽开始于……
distance 指针移动了这么多 px 之后。
delay 按下持续了这么多 ms 之后。同时设置了 distance 时，取先满足的那个。
tolerance 与 delay 配合：等待期间指针可以移动多远。超出时按下放弃，让页面可以滚动。没有 distance 时默认为 5 px。
没有自定义约束时，每种指针类型都有自己的默认值：
指针 默认值
鼠标 移动 4 px 之后。在 handle 上按下时立即开始，除非设置了鼠标约束。
触控笔 移动 4 px 之后。
触摸 按下 200 ms 之后。在此之前移动超过 5 px 会放弃，改为滚动页面。
### 在哪里设置 按指针类型——`mouse`、`touch`、`pen`——设置在 provider、拖拽区域或项上。对于每种类型，项自己的优先，然后是它所在区域的，最后是 provider 的： ```vue ``` ```ts // Inbox.vue: the rules of every drag that starts inside the panel. makeDragArea(panel, { activation: () => MODES[mode.value].activation }); // One item: a longer press by touch, the area's rule for the mouse. makeSortableItem(el, { item: () => props.task, activation: { touch: { delay: 400, tolerance: 8 } } }); ``` 这些选项在按下开始时读取，所以 getter 或 ref 可以实时切换它们，就像演示那样。键盘拖拽立即开始。[自定义传感器](#a-sensor-of-your-own)可以要求它自己的约束，或某种指针类型所配置的约束。 ### 长按圆环 按下等待期间，`useDnD().status` 为 `'activating'`，`activation.progress` 从 0 走到 1——使用 `delay` 时按时间，使用 `distance` 时按移动的距离。演示在按下的位置画出一个圆环： ```vue [Inbox.vue] ``` 给圆环设置 `pointer-events: none`：它位于指针下方，而拖拽要对那里的东西做命中测试。放弃的按下——移动超出了 `tolerance`，或松开得太早——会让 `status` 直接回到 `'idle'`。 ### 手柄立即开始 有 `handle` 时，只有手柄能开始拖拽，在它上面按下鼠标会立即开始拖拽：抓住抓手这个动作已经没有需要区分的了。在按下的地方松开仍然是点击，所以抓手可以在 `click` 时打开菜单（指针只在移动后才会被捕获）。触摸仍会等待长按，除非手柄无法滚动页面。给手柄加上 `touch-action: none`，并给项设置一个较短的距离： ```ts [Message.vue] makeSortableItem(el, { item: () => props.chat, handle: '.grip', // The grip has `touch-action: none`: a touch on it can't scroll, so it drags after 4 px. activation: { touch: { distance: 4 } }, }); ``` 在项、它所在区域或 provider 上设置的鼠标约束，同样适用于手柄。像演示那样把抓手做成 `