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:
- A
drop
el evento se activa desde el destino donde soltar - 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">
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:
- […]
De lo contrario, la operación de arrastre podría ser un éxito; ejecuta estos subpasos:
- Dejar cayó ser cierto.
- 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.- […]
- Dispara un evento DND llamado
dragend
en el nodo fuente.- […]
Es el mismo orden para Firefox.
– gal007
13/10/2016 a las 19:44