v146 · Web APIs · Modifier Key Effects

Modifier Key Effects

Hold Ctrl while dragging to request copy, or Alt for link. The dragover handler can read which keys are held and set dropEffect accordingly. In Chrome 146, the drop handler receives the same effect — enabling correct copy vs move vs link behaviour.

Modifier key conventions vary by platform. On macOS, Option requests copy; on Windows/Linux, Ctrl requests copy, Alt requests link. This demo uses the Ctrl/Alt convention. The dragover event's ctrlKey, altKey, and shiftKey let you detect which modifier is held.

modifier key → dropEffect mapping

Held during drag dropEffect set Meaning
(none) 'move' Move item to drop target, remove from source
Ctrl 'copy' Copy item — source keeps original
Alt 'link' Create a link/reference to the source

try it

Source

Document.pdf

effectAllowed: all

—
drop here (hold Ctrl or Alt)
Drag the item above while holding Ctrl or Alt…

code

draggable.addEventListener('dragstart', event => {
  event.dataTransfer.effectAllowed = 'all'; // allow any operation
  event.dataTransfer.setData('text/plain', 'payload');
});

dropTarget.addEventListener('dragover', event => {
  event.preventDefault();

  // Map modifier keys to drop operations
  if (event.ctrlKey) {
    event.dataTransfer.dropEffect = 'copy';
  } else if (event.altKey) {
    event.dataTransfer.dropEffect = 'link';
  } else {
    event.dataTransfer.dropEffect = 'move';
  }
});

dropTarget.addEventListener('drop', event => {
  event.preventDefault();
  // Chrome 146: dropEffect matches what dragover set
  const effect = event.dataTransfer.dropEffect; // 'copy' | 'move' | 'link'

  switch (effect) {
    case 'copy': copyItem(); break;
    case 'move': moveItem(); break;   // also remove from source
    case 'link': linkItem(); break;
  }
});

see also