HTML5 wydarzenie dragend wypalania natychmiast

Question

Mam kilka elementów, które można przeciągać

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

I mam następujące procedury obsługi zdarzenia:

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() 
} 

Dlaczego to działa tylko na pierwszym przeciągany. Jeśli przeciągnę, powiedz ostatni przeciągany - zdarzenie przeciągania zostanie natychmiast wywołane. (Nie chcę używać jQuery UI btw)

Nie ma to dla mnie żadnego sensu - wygląda jak błąd.

Jestem na Chrome v 30 na OSX.

Tu jest link do JSFiddle: http://jsfiddle.net/joergd/zGSpP/17/

(Edycja: jest to powtórzenie następujące pytanie: dragend, dragenter, and dragleave firing off immediately when I drag - ale myślę, że oryginalny plakat był w porządku, aby przejść z jQuery UI, podczas gdy chcę go mieć HTML5 natywny)

Answer 1

Nie mam bezpośredniego rozwiązania, ale zmiana DOM w procedurze obsługi zdarzeń dragStart powoduje ten problem, a każdy kod, który zmienia DOM, powinien naprawdę przejść w procedurze obsługi przeciągania - tak, przeciągnij & Zdarzenia upuszczania są uruchamiane bardziej niezawodnie.

Nie jestem pewien, czy jest to zgodne z projektem, ale wygląda trochę jak błąd.

Answer 2

Jak wspomniałem w temacie dragend, dragenter, and dragleave firing off immediately when I drag, dla mnie rozwiązaniem problemu (który wydaje się być błędem Chrome) było dodanie setTimeout 10 milisekund do obsługi i manipulowanie DOM w tym timeoutie.

Answer 3

Jest to znany problem z chromem. Problem polega na tym, jak Joerg wspomina, że ​​manipulujesz domem na dragstart.

Możesz to zrobić, ale musisz zrobić to w timeout.