Disabled

Both makeDraggable and makeDroppable accept a disabled option. Disabled draggables cannot be picked up; disabled droppables silently reject all drops.

Demo

Items

draggable Active task

disabled Blocked task

draggable Another task

Drop zones

Active zoneaccepts drops

Locked zonedisabled

Blocked task cannot be dragged. Locked zone cannot receive drops.

Disabling a draggable

makeDraggable(itemRef, {
  disabled: true,
});

A disabled draggable is completely inert — no pointer events start a drag.

Disabling a droppable

makeDroppable(zoneRef, {
  disabled: true,
});

A disabled droppable is ignored during collision detection — onEnter, onDrop, and onLeave are never called.

Dynamic disabled state

Pass a reactive Ref<boolean> to toggle at runtime:

<script setup lang="ts">
  import { ref, useTemplateRef } from 'vue';
  import { makeDraggable } from '@vue-dnd-kit/core';

  const isLocked = ref(false);
  const itemRef = useTemplateRef<HTMLElement>('itemRef');

  makeDraggable(itemRef, {
    disabled: isLocked,
  });
</script>

<template>
  <div ref="itemRef" :class="{ locked: isLocked }">...</div>
  <button @click="isLocked = !isLocked">Toggle lock</button>
</template>

Visual feedback

Show disabled state visually so users understand why an item is inert:

.item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none; /* optional: also block hover effects */
}

<div
  ref="itemRef"
  :class="{ 'item--disabled': isDisabled }"
>
  ...
</div>

See also

• makeDraggable
• makeDroppable
• Groups — restricting drops by group instead of disabling

Source

• Example.vue