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 { useRef } from 'react';
import { disabled, useDraggable } from '@neodrag/react';

function DisabledExample() {
  const elementRef = useRef<HTMLDivElement>(null);

  useDraggable(elementRef, [disabled(true)]);

  return <div ref={elementRef}>Can't drag me!</div>;
}

Dynamic Toggle

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

import { useState, useRef } from 'react';
import {
  disabled,
  useDraggable,
  useCompartment,
} from '@neodrag/react';

function ToggleDisabled() {
  const ref = useRef<HTMLDivElement>(null);
  const [isDragDisabled, setIsDragDisabled] = useState(false);

  const disabledComp = useCompartment(
    () => disabled(isDragDisabled),
    [isDragDisabled],
  );

  useDraggable(ref, () => [disabledComp]);

  return (
    <div>
      <div ref={ref}>
        Dragging is {isDragDisabled ? 'disabled' : 'enabled'}
      </div>
      <button onClick={() => setIsDragDisabled(!isDragDisabled)}>
        {isDragDisabled ? 'Enable' : 'Disable'} Dragging
      </button>
    </div>
  );
}

Conditional Disabling

import { useState, useRef } from 'react';
import {
  disabled,
  useDraggable,
  useCompartment,
} from '@neodrag/react';

function ConditionalDisabled() {
  const ref = useRef<HTMLDivElement>(null);
  const [isFormValid, setIsFormValid] = useState(true);
  const [isLoading, setIsLoading] = useState(false);

  // Disable dragging when form is invalid or loading
  const disabledComp = useCompartment(
    () => disabled(!isFormValid || isLoading),
    [isFormValid, isLoading],
  );

  useDraggable(ref, () => [disabledComp]);

  return (
    <div>
      <div ref={ref}>
        {isLoading
          ? 'Loading...'
          : !isFormValid
            ? 'Form Invalid - No Dragging'
            : 'Ready to Drag'}
      </div>

      <label>
        <input
          type="checkbox"
          checked={isFormValid}
          onChange={(e) => setIsFormValid(e.target.checked)}
        />
        Form Valid
      </label>

      <label>
        <input
          type="checkbox"
          checked={isLoading}
          onChange={(e) => setIsLoading(e.target.checked)}
        />
        Loading
      </label>
    </div>
  );
}

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.