feat(useDraggable): add buttons option (#4084)

DrJonki · antfu · web-flow · commit e9938ea07e54 · 2024-07-17T13:08:30.000Z
Co-authored-by: Anthony Fu &lt;github@antfu.me&gt;
diff --git a/packages/core/useDraggable/component.ts b/packages/core/useDraggable/component.ts
@@ -35,6 +35,7 @@ export const UseDraggable = /* #__PURE__ */ defineComponent<UseDraggableProps>({
     'onMove',
     'onEnd',
     'disabled',
+    'buttons',
   ] as unknown as undefined,
   setup(props, { slots }) {
     const target = ref()
diff --git a/packages/core/useDraggable/index.ts b/packages/core/useDraggable/index.ts
@@ -97,6 +97,20 @@ export interface UseDraggableOptions {
    * @default false
    */
   disabled?: MaybeRefOrGetter<boolean>
+
+  /**
+   * Mouse buttons that are allowed to trigger drag events.
+   *
+   * - `0`: Main button, usually the left button or the un-initialized state
+   * - `1`: Auxiliary button, usually the wheel button or the middle button (if present)
+   * - `2`: Secondary button, usually the right button
+   * - `3`: Fourth button, typically the Browser Back button
+   * - `4`: Fifth button, typically the Browser Forward button
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button#value
+   * @default [0]
+   */
+  buttons?: MaybeRefOrGetter<number[]>
 }
 
 /**
@@ -123,6 +137,7 @@ export function useDraggable(
     draggingElement = defaultWindow,
     containerElement,
     handle: draggingHandle = target,
+    buttons = [0],
   } = options
 
   const position = ref<Position>(
@@ -145,7 +160,7 @@ export function useDraggable(
   }
 
   const start = (e: PointerEvent) => {
-    if (e.button !== 0)
+    if (!toValue(buttons).includes(e.button))
       return
     if (toValue(options.disabled) || !filterEvent(e))
       return
