¿Hay un orden definido entre los eventos de arrastrar y soltar?

2 minutos de lectura

avatar de usuario de robertjlooby
robert_looby

De acuerdo a la documentación en la API de arrastrar y soltar de HTML5, se activan dos eventos cuando se suelta un elemento:

  1. A drop el evento se activa desde el destino donde soltar
  2. A dragend el evento se dispara desde la fuente del arrastre

Al hacer una prueba simple (ver fragmento), el drop evento siempre se dispara justo antes del dragend evento (al menos en Chrome) pero no puedo encontrar nada sobre el orden de estos eventos en la especificación.

¿Está definido el orden de estos eventos o son libres de disparar en cualquier orden?

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">

  • Es el mismo orden para Firefox.

    – gal007

    13/10/2016 a las 19:44

Avatar de usuario de Robby Cornelissen
Robby Cornelissen

De acuerdo con la modelo de procesamiento de arrastrar y soltar especificado en la especificación HTML actual (actualizada el 8 de junio de 2021), el drop() evento debe disparar antes de la dragend() evento.

La información correspondiente está profundamente anidada en el documento, pero la sección que describe el final de la operación de arrastre tiene el siguiente aspecto (omisiones y énfasis míos):

De lo contrario, si el usuario finalizó la operación de arrastrar y soltar (por ejemplo, soltando el botón del mouse en una interfaz de arrastrar y soltar controlada por el mouse), o si el drag evento fue cancelado, entonces esta será la última iteración. Ejecute los siguientes pasos, luego detenga la operación de arrastrar y soltar:

  1. […]

    De lo contrario, la operación de arrastre podría ser un éxito; ejecuta estos subpasos:

    1. Dejar cayó ser cierto.
    2. Si el elemento de destino actual es un elemento DOM, active un evento DND llamado drop en eso; de lo contrario, use convenciones específicas de la plataforma para indicar una caída.
    3. […]
  2. Dispara un evento DND llamado dragend en el nodo fuente.
  3. […]

¿Ha sido útil esta solución?