v148 · Demo 1

DropEffect Live Viewer

Drag the item over each zone and watch dataTransfer.dropEffect update correctly during dragenter, dragover, and dragleave events.

Drag source
☰ Drag me
effectAllowed:
Zone A — dragenter / dragover dropEffect: —
Zone B — dragleave always "none" dropEffect: —
Zone C — drop target dropEffect: —
Event Log — dropEffect values
Drag over the zones to see dropEffect values.

what Chrome 148 fixed

// Chrome 148+ (spec-compliant):
element.addEventListener('dragenter', (e) => {
  e.preventDefault();
  // dropEffect is now correctly computed from effectAllowed
  // e.g. effectAllowed: "copy" → dropEffect: "copy"
  //      effectAllowed: "move" → dropEffect: "move"
  console.log(e.dataTransfer.dropEffect); // ← reliable now
});

element.addEventListener('dragleave', (e) => {
  // dropEffect is now always "none" on dragleave (spec requirement)
  console.log(e.dataTransfer.dropEffect); // "none" ← always correct now
});

// Before Chrome 148: dropEffect had arbitrary values on these events.

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗