feat(useMousePressed): support drag and drop (#593)

* feat: initial support for useMousePressed DnD

This is an initial attempt at drag and drop support for isMousePressed.

* chore: update

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/core/useMousePressed/demo.vue

@@ -25,5 +25,11 @@ const text = stringify(mouse)
         {{ withTarget ? 'Demo section' : 'Entire page' }}
       </button>
     </div>
+    <div
+      class="h-40 w-40 bg-green-200 p-3 flex flex-row items-center text-center"
+      @drop.prevent="() => {}"
+    >
+      Drop something here to try drag and drop.
+    </div>
   </div>
 </template>

packages/core/useMousePressed/index.ts

@@ -12,6 +12,13 @@ export interface MousePressedOptions extends ConfigurableWindow {
    */
   touch?: boolean
 
+  /**
+   * Listen to `dragstart` `drop` and `dragend` events
+   *
+   * @default true
+   */
+  drag?: boolean
+
   /**
    * Initial values
    *
@@ -34,6 +41,7 @@ export interface MousePressedOptions extends ConfigurableWindow {
 export function useMousePressed(options: MousePressedOptions = {}) {
   const {
     touch = true,
+    drag = true,
     initialValue = false,
     window = defaultWindow,
   } = options
@@ -48,33 +56,34 @@ export function useMousePressed(options: MousePressedOptions = {}) {
     }
   }
 
+  const onPressed = (srcType: MouseSourceType) => () => {
+    pressed.value = true
+    sourceType.value = srcType
+  }
   const onReleased = () => {
     pressed.value = false
     sourceType.value = null
   }
 
   const target = computed(() => unrefElement(options.target) || window)
 
+  useEventListener(target, 'mousedown', onPressed('mouse'), { passive: true })
+
   useEventListener(window, 'mouseleave', onReleased, { passive: true })
   useEventListener(window, 'mouseup', onReleased, { passive: true })
-  useEventListener(target, 'mousedown',
-    () => {
-      pressed.value = true
-      sourceType.value = 'mouse'
-    },
-    { passive: true },
-  )
+
+  if (drag) {
+    useEventListener(target, 'dragstart', onPressed('mouse'), { passive: true })
+
+    useEventListener(window, 'drop', onReleased, { passive: true })
+    useEventListener(window, 'dragend', onReleased, { passive: true })
+  }
 
   if (touch) {
+    useEventListener(target, 'touchstart', onPressed('touch'), { passive: true })
+
     useEventListener(window, 'touchend', onReleased, { passive: true })
     useEventListener(window, 'touchcancel', onReleased, { passive: true })
-    useEventListener(target, 'touchstart',
-      () => {
-        pressed.value = true
-        sourceType.value = 'touch'
-      },
-      { passive: true },
-    )
   }
 
   return {