Drag Activation

The activation option on makeDraggable controls when a pointer-down becomes a drag. Use it to prevent accidental drags and improve touch usability.

Demo

Instant

No activation — drag starts immediately on pointer down

Distance: 8px

Move 8px before drag starts (prevents accidental drags)

Delay: 500ms

Hold 500ms before drag starts (good for mobile / touch)

The green bar shows activation progress. For Distance, it fills as you move the pointer. For Delay, it fills while you hold down.

Options

makeDraggable(ref, {
  activation: {
    distance?: number | { x?: number; y?: number; condition?: 'any' | 'both' };
    delay?: number;
  }
});

distance

Minimum pointer movement in pixels before the drag starts.

// Simple — same threshold on both axes, drag if either axis exceeds it
makeDraggable(ref, { activation: { distance: 8 } });

// Per-axis — only horizontal movement activates drag
makeDraggable(ref, {
  activation: {
    distance: { x: 10, y: 0 },
  },
});

// condition: 'both' — both x and y must exceed threshold
makeDraggable(ref, {
  activation: {
    distance: { x: 5, y: 5, condition: 'both' },
  },
});

The default condition is 'any' — either axis exceeding the threshold is enough.

delay

Time in milliseconds the pointer must be held before drag starts.

// Hold 300ms before drag starts (good for mobile / long-press)
makeDraggable(ref, { activation: { delay: 300 } });

Combining both

// Drag only starts if held 200ms AND moved 5px
makeDraggable(ref, {
  activation: {
    delay: 200,
    distance: 5,
  },
});

Activation state

While the threshold is being evaluated, provider.state.value === 'activating'. You can read progress:

const provider = useDnDProvider();

// 0–1 progress of delay threshold
const delayProgress = computed(() => provider.delay.progress);

// 0–1 progress of distance threshold
const distProgress = computed(() => provider.distanceProgress.value);

Use these to show a progress indicator (hold bar, fill ring, etc.).

Source

• Example.vue
• ActivationItem.vue

See also

• makeDraggable — full options reference
• useDnDProvider — state, delay, distanceProgress