v148 · Demo 2

Effective Drop Detection

Read dropEffect during dragenter to style drop zones before the user releases — showing "copy", "move", or "blocked" feedback instantly based on the dragged item's effectAllowed.

Drag a file to a zone. Each file has a different effectAllowed. The zone shows the correct operation based on Chrome 148's fixed dropEffect value during dragenter.

🖼️ image.png copy
📄 document.pdf move
🔗 link.url link
—

📁 Uploads

Drop any file here

—

🗂 Archive

Move files here

Drag a file over a zone to see how dropEffect is used to style the UI before the drop.

pattern: read dropEffect on dragenter

dropZone.addEventListener('dragenter', (e) => {
  e.preventDefault();

  // In Chrome 148+ dropEffect is correctly set here
  const operation = e.dataTransfer.dropEffect; // "copy", "move", "link", or "none"

  // Style the zone based on the operation — before the user drops
  if (operation === 'copy') {
    zone.classList.add('accepts-copy');  // green ring + "Copy" label
  } else if (operation === 'move') {
    zone.classList.add('accepts-move');  // blue ring + "Move" label
  } else if (operation === 'none') {
    zone.classList.add('rejected');      // red ring + "Not allowed" label
  }
});

// Before Chrome 148: dropEffect was unreliable here,
// so you couldn't know the operation until drop fired.

references

implementation reference

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