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

import { disabled, Draggable } from '@neodrag/vanilla';

const element = document.getElementById('element');
new Draggable(element, [disabled(true)]);

Dynamic Toggle

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

import { disabled, Draggable, Compartment } from '@neodrag/vanilla';

let isDragDisabled = false;
const disabledComp = new Compartment(() => disabled(isDragDisabled));

const element = document.getElementById('element');
const button = document.getElementById('toggle-button');
const status = document.getElementById('status');

new Draggable(element, () => [disabledComp]);

button.addEventListener('click', () => {
  isDragDisabled = !isDragDisabled;
  disabledComp.current = disabled(isDragDisabled);

  status.textContent = `Dragging is ${isDragDisabled ? 'disabled' : 'enabled'}`;
  button.textContent = `${isDragDisabled ? 'Enable' : 'Disable'} Dragging`;
});

Conditional Disabling

import { disabled, Draggable, Compartment } from '@neodrag/vanilla';

let isFormValid = true;
let isLoading = false;

const disabledComp = new Compartment(() =>
  disabled(!isFormValid || isLoading),
);

const element = document.getElementById('element');
const formValidCheckbox = document.getElementById('form-valid');
const loadingCheckbox = document.getElementById('loading');
const status = document.getElementById('status');

new Draggable(element, () => [disabledComp]);

function updateStatus() {
  const isDragDisabled = !isFormValid || isLoading;
  disabledComp.current = disabled(isDragDisabled);

  if (isLoading) {
    status.textContent = 'Loading...';
  } else if (!isFormValid) {
    status.textContent = 'Form Invalid - No Dragging';
  } else {
    status.textContent = 'Ready to Drag';
  }
}

formValidCheckbox.addEventListener('change', (e) => {
  isFormValid = e.target.checked;
  updateStatus();
});

loadingCheckbox.addEventListener('change', (e) => {
  isLoading = e.target.checked;
  updateStatus();
});

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.