feat(useDraggable): support customizing trigger element

packages/core/useDraggable/component.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, reactive, ref } from 'vue-demi'
+import { computed, defineComponent, h, reactive, ref } from 'vue-demi'
 import type { UseDraggableOptions } from '@vueuse/core'
 import { isClient, useDraggable, useStorage } from '@vueuse/core'
 import { resolveUnref } from '@vueuse/shared'
@@ -29,9 +29,11 @@ export const UseDraggable = defineComponent<UseDraggableProps>({
     'stopPropagation',
     'pointerTypes',
     'as',
+    'handle',
   ] as unknown as undefined,
   setup(props, { slots }) {
     const target = ref()
+    const handle = computed(() => props.handle ?? target.value)
     const initialValue = props.storageKey
       ? useStorage(
         props.storageKey,
@@ -46,6 +48,7 @@ export const UseDraggable = defineComponent<UseDraggableProps>({
 
     const data = reactive(useDraggable(target, {
       ...props,
+      handle,
       initialValue,
     }))
 

packages/core/useDraggable/demo.vue

@@ -5,6 +5,7 @@ import { useDraggable } from '@vueuse/core'
 import { UseDraggable as Draggable } from './component'
 
 const el = ref<HTMLElement | null>(null)
+const handle = ref<HTMLElement | null>(null)
 
 const innerWidth = isClient ? window.innerWidth : 200
 
@@ -53,5 +54,26 @@ const { x, y, style } = useDraggable(el, {
         {{ 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 z-10"
+      :initial-value="{ x: innerWidth / 3.6, y: 240 }"
+      :prevent-default="true"
+      :handle="handle"
+    >
+      <div ref="handle" class="cursor-move">
+        👋 Drag here!
+      </div>
+      <div class="text-xs opacity-50">
+        Handle that triggers the drag event
+      </div>
+      <div class="text-sm opacity-50">
+        I am at {{ Math.round(x) }}, {{ Math.round(y) }}
+      </div>
+    </Draggable>
   </div>
 </template>

packages/core/useDraggable/index.ts

@@ -34,6 +34,13 @@ export interface UseDraggableOptions {
    */
   draggingElement?: MaybeComputedRef<HTMLElement | SVGElement | Window | Document | null | undefined>
 
+  /**
+   * Handle that triggers the drag event
+   *
+   * @default target
+   */
+  handle?: MaybeComputedRef<HTMLElement | SVGElement | null | undefined>
+
   /**
    * Pointer types that listen to.
    *
@@ -44,7 +51,7 @@ export interface UseDraggableOptions {
   /**
    * Initial position of the element.
    *
-   * @default { x: 0, y: 0}
+   * @default { x: 0, y: 0 }
    */
   initialValue?: MaybeComputedRef<Position>
 
@@ -73,6 +80,7 @@ export interface UseDraggableOptions {
  */
 export function useDraggable(target: MaybeComputedRef<HTMLElement | SVGElement | null | undefined>, options: UseDraggableOptions = {}) {
   const draggingElement = options.draggingElement ?? defaultWindow
+  const draggingHandle = options.handle ?? target
   const position = ref<Position>(resolveUnref(options.initialValue) ?? { x: 0, y: 0 })
   const pressedDelta = ref<Position>()
 
@@ -127,7 +135,7 @@ export function useDraggable(target: MaybeComputedRef<HTMLElement | SVGElement |
   }
 
   if (isClient) {
-    useEventListener(target, 'pointerdown', start, true)
+    useEventListener(draggingHandle, 'pointerdown', start, true)
     useEventListener(draggingElement, 'pointermove', move, true)
     useEventListener(draggingElement, 'pointerup', end, true)
   }