From c0394bb9ac87a2df49afd6c3b487f3f949526dad Mon Sep 17 00:00:00 2001
From: imguolao <guolao.mq@foxmail.com>
Date: Sat, 27 Aug 2022 01:28:41 +0800
Subject: [PATCH] feat(useDraggable): Support trigger handle

---
 packages/core/useDraggable/component.ts |  1 +
 packages/core/useDraggable/demo.vue     | 21 +++++++++++++++++++++
 packages/core/useDraggable/index.ts     | 20 ++++++++++++++++++--
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/packages/core/useDraggable/component.ts b/packages/core/useDraggable/component.ts
index d2d35669ead..897c97d34f8 100644
--- a/packages/core/useDraggable/component.ts
+++ b/packages/core/useDraggable/component.ts
@@ -29,6 +29,7 @@ export const UseDraggable = defineComponent<UseDraggableProps>({
     'stopPropagation',
     'pointerTypes',
     'as',
+    'handle',
   ] as unknown as undefined,
   setup(props, { slots }) {
     const target = ref()
diff --git a/packages/core/useDraggable/demo.vue b/packages/core/useDraggable/demo.vue
index ea09d11f02f..a0f1ba97f3c 100644
--- a/packages/core/useDraggable/demo.vue
+++ b/packages/core/useDraggable/demo.vue
@@ -53,5 +53,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.9, y: 240 }"
+      :prevent-default="true"
+      handle=".handle"
+    >
+      <div class="handle 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>
diff --git a/packages/core/useDraggable/index.ts b/packages/core/useDraggable/index.ts
index 606955c95d4..cef531fecef 100644
--- a/packages/core/useDraggable/index.ts
+++ b/packages/core/useDraggable/index.ts
@@ -1,6 +1,6 @@
 import { computed, ref } from 'vue-demi'
 import type { MaybeComputedRef } from '@vueuse/shared'
-import { isClient, resolveUnref, toRefs } from '@vueuse/shared'
+import { isClient, isString, resolveUnref, toRefs, tryOnMounted } from '@vueuse/shared'
 import { useEventListener } from '../useEventListener'
 import type { PointerType, Position } from '../types'
 import { defaultWindow } from '../_configurable'
@@ -34,6 +34,11 @@ export interface UseDraggableOptions {
    */
   draggingElement?: MaybeComputedRef<HTMLElement | SVGElement | Window | Document | null | undefined>
 
+  /**
+   * Handle that triggers the drag event
+   */
+  handle?: MaybeComputedRef<HTMLElement | SVGElement | string | null | undefined>
+
   /**
    * Pointer types that listen to.
    *
@@ -64,6 +69,16 @@ export interface UseDraggableOptions {
   onEnd?: (position: Position, event: PointerEvent) => void
 }
 
+function normalizeHandle(handle: UseDraggableOptions['handle']) {
+  const unrefHandle = resolveUnref(handle)
+  if (isString(unrefHandle)) {
+    const newHandle = ref<HTMLElement | SVGAElement | null>(null)
+    tryOnMounted(() => newHandle.value = document.querySelector<HTMLElement | SVGAElement>(unrefHandle))
+    return newHandle
+  }
+  return handle as MaybeComputedRef<HTMLElement | SVGElement | null | undefined>
+}
+
 /**
  * Make elements draggable.
  *
@@ -73,6 +88,7 @@ export interface UseDraggableOptions {
  */
 export function useDraggable(target: MaybeComputedRef<HTMLElement | SVGElement | null | undefined>, options: UseDraggableOptions = {}) {
   const draggingElement = options.draggingElement ?? defaultWindow
+  const draggingHandle = normalizeHandle(options.handle) ?? target
   const position = ref<Position>(resolveUnref(options.initialValue) ?? { x: 0, y: 0 })
   const pressedDelta = ref<Position>()
 
@@ -127,7 +143,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)
   }