Skip to content
Advertisement

Is there a defined ordering between dragend and drop events?

According to the documentation on the HTML5 drag and drop API, two events are fired when an element is dropped:

  1. A drop event is fired from the drop target
  2. 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:

  1. […]
    Otherwise, the drag operation might be a success; run these substeps:
    1. Let dropped be true.
    2. 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.
    3. […]
  2. Fire a DND event named dragend at the source node.
  3. […]
Advertisement