v148 · Drag & Drop · Interoperability

Dropzone Designer

Build drag-and-drop interfaces with multiple dropzones, each with configurable effectAllowed and dropEffect. See Chrome 148's corrected negotiation algorithm in action, test the pre-148 child-element bug, and compare old vs new behaviour.

Drag sources — configure effectAllowed

Drop Zones

Zone label effectAllowed

Negotiation Trace — Chrome 148 algorithm

How Chrome 148 sets dropEffect on dragenter/dragover

Browser reads effectAllowed from the drag source's dragstart event handler.

On dragenter/dragover, browser computes dropEffect from effectAllowed: copy→copy, move→move, link→link, copyMove→copy (default), all→copy (default), none→none.

The event handler may override dropEffect by assigning a compatible value. If the value is incompatible with effectAllowed, it is reset to "none".

On dragleave, dropEffect is always "none" — spec-required, now enforced in Chrome 148.

On drop, dropEffect reflects the final negotiated operation.

      Drag an item over a zone to see live negotiation here…
    

Edge Case — child element re-entry (pre-148 bug)

Pre-148 bug: dragging over a child element incorrectly reset dropEffect

In older Chrome, when a drag moved from a dropzone into a child element inside that same dropzone, dragenter fired on the child with a reset (often "none") dropEffect, then dragleave fired on the parent — briefly making the zone look undroppable. Chrome 148 tracks the effective target correctly.

⬛ Drag me over the nested zone effectAllowed: copy

Outer dropzone (effectAllowed: copy)

Child element — drag here to test re-entry

Drag the item over the nested zone…

Pre / Post Chrome 148 Comparison

Before Chrome 148

dragenter — dropEffect was unpredictable / carried over from previous event
dragover — dropEffect sometimes "none" even on valid drop targets
dragleave — sometimes still showed the previous operation's value instead of "none"
Child re-entry — moving inside a zone could reset dropEffect to "none" mid-drag
Cursor didn't reliably reflect copy/move/link until drop

Chrome 148 (spec-correct)

dragenter — dropEffect computed from effectAllowed consistently
dragover — dropEffect reflects the negotiated operation reliably
dragleave — always "none" (as spec requires)
Child re-entry — zone tracks effective drag target; no false "none" flashes
Cursor reliably shows copy/move/link/no-drop during drag

Live Event Log

--:--:--Drag an item over a dropzone to see events…