fix(useDraggable): add capture prop to component (#4911)

wgh970312 · web-flow · commit 547f8fa80747 · 2025-07-28T04:24:47.000Z
diff --git a/packages/core/useDraggable/component.ts b/packages/core/useDraggable/component.ts
@@ -36,6 +36,7 @@ export const UseDraggable = /* #__PURE__ */ defineComponent<UseDraggableProps>({
     'disabled',
     'buttons',
     'containerElement',
+    'capture',
   ] as unknown as undefined,
   setup(props, { slots }) {
     const target = shallowRef<HTMLElement | SVGElement | null>()
diff --git a/packages/core/useDraggable/demo.vue b/packages/core/useDraggable/demo.vue
@@ -87,5 +87,25 @@ const { x, y, style } = useDraggable(el, {
         I am at {{ Math.round(x) }}, {{ Math.round(y) }}
       </div>
     </Draggable>
+
+    <Draggable
+      v-slot="{ x, y }"
+      p="x-4 y-2"
+      border="~ gray-400/30 rounded"
+      shadow="~ hover:lg"
+      class="fixed bg-$vp-c-bg select-none cursor-move z-31"
+      :initial-value="{ x: innerWidth / 3.3, y: 330 }"
+      prevent-default
+      :disabled="disabled"
+      :capture="false"
+    >
+      Not Use Captured Element
+      <div class="text-xs opacity-50 cursor-default" @pointerdown.stop>
+        Dragging here will not work
+      </div>
+      <div class="text-sm opacity-50">
+        {{ Math.round(x) }}, {{ Math.round(y) }}
+      </div>
+    </Draggable>
   </div>
 </template>
