HTML5 evento dragend sparare immediatamente

Question

ho diversi elementi trascinabili

<div Class="question-item" draggable="true">Box 1: Milk was a bad choice.</div> 
<div class="question-item" draggable="true">Box 2: I'm Ron Burgundy?</div> 
<div class="question-item" draggable="true">Box 3: You ate the entire wheel of cheese?  </div> 
<div class="question-item" draggable="true">Box 4: Scotch scotch scotch</div> 

E ho i seguenti gestori di eventi:

var $questionItems = $('.question-item'); 

$questionItems 
    .on('dragstart', startDrag) 
    .on('dragend', removeDropSpaces) 
    .on('dragenter', toggleDropStyles) 
    .on('dragleave', toggleDropStyles); 


function startDrag(e){ 
    console.log('dragging...'); 
    addDropSpaces(); 
    e.stopPropagation(); 
} 

function toggleDropStyles(){ 
    $(this).toggleClass('drag-over'); 
    console.log(this); 
} 


function addDropSpaces(){ 
    $questionItems.after('<div class="empty-drop-target"></div>'); 
} 

function removeDropSpaces(){ 
    console.log("dragend"); 
    $('.empty-drop-target').remove() 
} 

perché funziona solo per il primo trascinabile. Se trascino dire l'ultimo trascinamento, l'evento di trascinamento viene immediatamente attivato. (Non voglio usare jQuery UI btw)

Non ha senso per me - sembra un bug.

Sono su Chrome v 30 su OSX.

Ecco un link al JSFiddle: http://jsfiddle.net/joergd/zGSpP/17/

(Edit: questo è ripetizione del seguente domanda: dragend, dragenter, and dragleave firing off immediately when I drag - ma credo che il manifesto originale andava bene ad andare con jQuery UI, mentre io voglio che sia HTML5 nativo)

Answer 1

Non ho una soluzione diretta, ma la modifica del DOM nel gestore di eventi dragStart sta causando questo problema, e qualsiasi codice che modifichi il DOM dovrebbe davvero andare nel gestore di eventi dragEnter - facendo così, trascinare Gli eventi di rilascio & vengono generati in modo più affidabile.

Non sono sicuro se questo è di progettazione, anche se sembra un po 'un errore.

Answer 2

Come ho menzionato nell'argomento dragend, dragenter, and dragleave firing off immediately when I drag, ciò che ha risolto il problema (che sembra essere un bug di Chrome) per me è stato aggiungere un setTimeout di 10 millisecondi nel gestore e manipolare il DOM in quel timeout.

Answer 3

Questo è un problema noto di Chrome. Il problema è, come Joerg menziona che si manipola il dom su dragstart.

È possibile farlo, ma è necessario farlo in un timeout.