2016-06-29 13 views
6

Według the documentation na przeciągnij HTML5 i upuść API, dwa zdarzenia są opalane gdy element zostanie upuszczony:Czy istnieje zdefiniowana kolejność między zdarzeniami przeciągania i upuszczania?

  1. drop zdarzenie jest zwolniony z cel upuszczenia
  2. dragend zdarzenie jest opalane od źródła drag

w ten prosty test (patrz fragment), zdarzenie drop zawsze wyzwalana tuż przed zdarzeniem dragend (przynajmniej w Chrome), ale nie mogę znaleźć nic na temat zamawiania tych wydarzeń w sp ec.

Czy zdefiniowano kolejność tych zdarzeń, czy można je uruchomić w dowolnej kolejności?

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

To samo zamówienie dla Firefoksa – gal007

Odpowiedz

6

Według drag-and-drop processing model określonym w prąd (zaktualizowane 08 maja 2017) Specyfikacja HTML, zdarzenie drop() musi wstrzelić przed, termin dragend().

Odpowiednia informacja jest głęboko zagnieżdżony w dokumencie, ale sekcja opisująca koniec operacji przeciągania wygląda następująco (przeoczeń i nacisk moje):

W przeciwnym razie, jeśli użytkownik zakończył przeciągnij i -drop (np. przez zwalniając przycisk myszy w interfejsie przeciągania i upuszczania sterowanym przez mysz), lub jeśli zdarzenie drag zostało anulowane, to będzie to ostatnia iteracja . Uruchom następujące kroki, a następnie zatrzymać operacji przeciągania i upuszczania:

  1. [...]
    przeciwnym razie operacja przeciągania może być sukcesem; uruchom następujące podtypy:
    1. Porzuć porzucił być prawdziwy.
    2. Jeśli bieżącym elementem docelowym jest element DOM, uruchom wywołanie zdarzenia DND o nazwie drop; w przeciwnym razie należy użyć konwencji specyficznych dla platformy dla wskazania kropli.
    3. [...]
  2. Ogień zdarzenie DND nazwie dragend w węźle źródłowym.
  3. [...]
Powiązane problemy