2016-06-29 41 views
6

Secondo the documentation sulla via HTML5 e rilasciare API, due eventi vengono generati quando un elemento è caduto:Esiste un ordine definito tra gli eventi drag-and-drop?

  1. Un evento drop viene generato dalla porta goccia
  2. Un evento dragend viene generato dalla sorgente di la resistenza

nel fare un semplice test (vedi frammento), l'evento drop spara sempre appena prima dell'evento dragend (almeno in Chrome), ma non riesco a trovare nulla circa l'ordine di questi eventi nella sp ec.

L'ordine di questi eventi è definito o sono liberi di sparare in entrambi gli ordini?

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

+0

E 'lo stesso ordine per Firefox – gal007

risposta

6

Secondo il drag-and-drop processing model specificato nella attuale (8 maggio 2017) specifica HTML, l'evento drop() deve sparare prima dell'evento dragend().

L'informazione corrispondente è profondamente annidato nel documento, ma la sezione che descrive la fine dell'operazione di trascinamento appare come segue (omissioni e sottolineatura mia):

Altrimenti, se l'utente ha finito il trascinamento e operazione di interruzione (ad esempio per rilasciare il pulsante del mouse in un'interfaccia drag-and-drop basata su mouse), o se l'evento drag è stato annullato, quindi questa sarà l'ultima iterazione . Eseguire le seguenti operazioni, quindi arrestare il drag-and-drop funzionamento:

  1. [...]
    In caso contrario, l'operazione di trascinamento potrebbe essere un successo; eseguire questi passaggi:
    1. Lasciato lasciato essere vero.
    2. Se l'elemento di destinazione corrente è un elemento DOM, attivare un evento DND denominato drop; in caso contrario, utilizzare le convenzioni specifiche della piattaforma per indicare una caduta.
    3. [...]
  2. fuoco un evento DND nome dragend presso il nodo di origine.
  3. [...]