v148 · HTML · Drag and Drop
DropEffect Matrix
The complete effectAllowed × dropEffect matrix showing what Chrome 148 now reports on each drag event. Chrome 148 fixes dragenter/dragover to show the effective operation, and dragleave to always report "none".
Live demo
Drag the card into the drop zone. Select an effectAllowed and watch what dropEffect the drag events report.
Drag me →
effectAllowed: move
Drop here
Chrome 148 fix: On
dragenter and dragover, dataTransfer.dropEffect now reflects the effective operation. On dragleave it always returns "none" (previously it might return the wrong value). This is the spec-correct behaviour.
Event log
Drag the card to see events…
effectAllowed × dropEffect reference
What dropEffect dragenter/dragover now report for each effectAllowed value (Chrome 148+).
| effectAllowed | dragenter.dropEffect | dragover.dropEffect | dragleave.dropEffect | drop.dropEffect |
|---|---|---|---|---|
| copy | copy | copy | none | copy |
| move | move | move | none | move |
| link | link | link | none | link |
| copyMove | copy | copy | none | copy |
| copyLink | copy | copy | none | copy |
| linkMove | link | link | none | link |
| all | copy | copy | none | copy |
| none | none | none | none | none |
references
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗