feat(useDraggable): add disabled parameter (#3613)

Co-authored-by: banruo <shl@dataqin.com>

Author: huiliangShen

packages/core/useDraggable/component.ts

@@ -34,10 +34,12 @@ export const UseDraggable = /* #__PURE__ */ defineComponent<UseDraggableProps>({
     'onStart',
     'onMove',
     'onEnd',
+    'disabled',
   ] as unknown as undefined,
   setup(props, { slots }) {
     const target = ref()
     const handle = computed(() => props.handle ?? target.value)
+    const disabled = computed(() => !!props.disabled)
     const storageValue = props.storageKey && useStorage(
       props.storageKey,
       toValue(props.initialValue) || { x: 0, y: 0 },
@@ -61,6 +63,7 @@ export const UseDraggable = /* #__PURE__ */ defineComponent<UseDraggableProps>({
       handle,
       initialValue,
       onEnd,
+      disabled,
     }))
 
     return () => {

packages/core/useDraggable/demo.vue

@@ -9,14 +9,25 @@ const handle = ref<HTMLElement | null>(null)
 
 const innerWidth = isClient ? window.innerWidth : 200
 
+const disabled = ref(false)
 const { x, y, style } = useDraggable(el, {
   initialValue: { x: innerWidth / 4.2, y: 80 },
   preventDefault: true,
+  disabled,
 })
 </script>
 
 <template>
   <div>
+    <div class="text-xs">
+      <label class="checkbox">
+        <input
+          :checked="disabled" type="checkbox" name="enabled"
+          @input="($event.target as HTMLInputElement)!.checked ? disabled = true : disabled = false "
+        >
+        <span>Disabled drag and drop</span>
+      </label>
+    </div>
     <p class="italic op50 text-center">
       Check the floating boxes
     </p>
@@ -42,9 +53,10 @@ const { x, y, style } = useDraggable(el, {
       shadow="~ hover:lg"
       class="fixed bg-$vp-c-bg select-none cursor-move z-31"
       :initial-value="{ x: innerWidth / 3.9, y: 150 }"
-      :prevent-default="true"
+      prevent-default
       storage-key="vueuse-draggable-pos"
       storage-type="session"
+      :disabled="disabled"
     >
       Renderless component
       <div class="text-xs opacity-50">
@@ -64,6 +76,7 @@ const { x, y, style } = useDraggable(el, {
       :initial-value="{ x: innerWidth / 3.6, y: 240 }"
       :prevent-default="true"
       :handle="handle"
+      :disabled="disabled"
     >
       <div ref="handle" class="cursor-move">
         👋 Drag here!

packages/core/useDraggable/index.ts

@@ -90,6 +90,13 @@ export interface UseDraggableOptions {
    * @default 'both'
    */
   axis?: 'x' | 'y' | 'both'
+
+  /**
+   * Disabled drag and drop.
+   *
+   * @default false
+   */
+  disabled?: MaybeRefOrGetter<boolean>
 }
 
 /**
@@ -138,7 +145,7 @@ export function useDraggable(
   }
 
   const start = (e: PointerEvent) => {
-    if (!filterEvent(e))
+    if (toValue(options.disabled) || !filterEvent(e))
       return
     if (toValue(exact) && e.target !== toValue(target))
       return
@@ -156,7 +163,7 @@ export function useDraggable(
     handleEvent(e)
   }
   const move = (e: PointerEvent) => {
-    if (!filterEvent(e))
+    if (toValue(options.disabled) || !filterEvent(e))
       return
     if (!pressedDelta.value)
       return
@@ -182,7 +189,7 @@ export function useDraggable(
     handleEvent(e)
   }
   const end = (e: PointerEvent) => {
-    if (!filterEvent(e))
+    if (toValue(options.disabled) || !filterEvent(e))
       return
     if (!pressedDelta.value)
       return