According to the documentation on the HTML5 drag and drop API, two events are fired when an element is dropped:
- A
drop
event is fired from the drop target - A
dragend
event is fired from the source of the drag
In doing a simple test (see snippet), the drop
event always fires just before the dragend
event (at least in Chrome) but I can’t find anything about the ordering of these events in the spec.
Is the ordering of these events defined, or are they free to fire in either order?
function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { console.log("drop at " + Date.now()); ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } function dragend(ev) { console.log("dragend at " + Date.now()); }
#div1 { background-color: red; height: 100px; width: 100px; } #drag1 { background-color: green; height: 50px; width: 50px; }
<div>Drag the green square in to the red one</div> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" width="100px" height="100px"></div> <div id="drag1" draggable="true" ondragstart="drag(event)" ondragend="dragend(event)" width="50px" height="50px">
Advertisement
Answer
According to the drag-and-drop processing model specified in the current (updated June 8, 2021) HTML specification, the drop()
event must fire before the dragend()
event.
The corresponding information is deeply nested in the document, but the section describing the end of the drag operation looks as follows (omissions and emphasis mine):
Otherwise, if the user ended the drag-and-drop operation (e.g. by releasing the mouse button in a mouse-driven drag-and-drop interface), or if the
drag
event was canceled, then this will be the last iteration. Run the following steps, then stop the drag-and-drop operation:
- […]
Otherwise, the drag operation might be a success; run these substeps:
- Let dropped be true.
- If the current target element is a DOM element, fire a DND event named
drop
at it; otherwise, use platform-specific conventions for indicating a drop.- […]
- Fire a DND event named
dragend
at the source node.- […]