disabled

Completely disable dragging functionality

The disabled plugin completely turns off dragging for an element. Pass true to disable, false to enable, or omit the argument to disable by default.

disabled(); // Disabled (default)
disabled(true); // Disabled
disabled(false); // Enabled (same as not using plugin)

Basic Usage

<script setup>
import { disabled, vDraggable } from '@neodrag/vue';
</script>

<template>
  <div v-draggable="[disabled(true)]">Can't drag me!</div>
</template>

Dynamic Toggle

The real power comes from dynamically enabling/disabling with compartments:

<script setup>
import { ref } from 'vue';
import { disabled, vDraggable, useCompartment } from '@neodrag/vue';

const isDragDisabled = ref(false);
const disabledComp = useCompartment(() =>
  disabled(isDragDisabled.value),
);

function toggleDragging() {
  isDragDisabled.value = !isDragDisabled.value;
}
</script>

<template>
  <div>
    <div v-draggable="() => [disabledComp]">
      Dragging is {{ isDragDisabled ? 'disabled' : 'enabled' }}
    </div>
    <button @click="toggleDragging">
      {{ isDragDisabled ? 'Enable' : 'Disable' }} Dragging
    </button>
  </div>
</template>

Conditional Disabling

<script setup>
import { ref } from 'vue';
import { disabled, vDraggable, useCompartment } from '@neodrag/vue';

const isFormValid = ref(true);
const isLoading = ref(false);

// Disable dragging when form is invalid or loading
const disabledComp = useCompartment(() =>
  disabled(!isFormValid.value || isLoading.value),
);
</script>

<template>
  <div>
    <div v-draggable="() => [disabledComp]">
      <span v-if="isLoading">Loading...</span>
      <span v-else-if="!isFormValid">Form Invalid - No Dragging</span>
      <span v-else>Ready to Drag</span>
    </div>

    <label>
      <input type="checkbox" v-model="isFormValid" />
      Form Valid
    </label>

    <label>
      <input type="checkbox" v-model="isLoading" />
      Loading
    </label>
  </div>
</template>

Real-World Examples

Form Validation

// Disable dragging until all required fields are filled
const isFormComplete = computed(
  () => name.length > 0 && email.includes('@') && message.length > 10,
);

const disabledComp = useCompartment(() =>
  disabled(!isFormComplete.value),
);

Loading States

// Disable during API calls
const disabledComp = useCompartment(() =>
  disabled(isSubmitting || isLoading),
);

User Permissions

// Only allow dragging for admin users
const disabledComp = useCompartment(() => disabled(!user.isAdmin));

How It Works

The disabled plugin implements the shouldStart hook:

When value is true (disabled), it returns false to prevent dragging. When value is false (enabled), it returns true to allow dragging.

API Reference

function disabled(value?: boolean): Plugin;

Parameters:

• value - Whether dragging should be disabled (default: true)
  • true - Disable dragging
  • false - Allow dragging (same as not using the plugin)

Usage patterns:

• disabled() - Always disabled (default true)
• disabled(true) - Explicitly disabled
• disabled(false) - Explicitly enabled
• disabled(condition) - Conditionally disabled based on boolean

Returns: A plugin object that prevents/allows dragging based on the value.