Upadek zdarzenia przeciągania HTML5 nie jest wyzwalany sporadycznie z powodu manipulacji DOM w zdarzeniu dragover

Question

Używam atrybutu przeciągania "html5" do przeciągnięcia 2 elementów w linii kontenera i svg, aby połączyć te dwa. Po podłączeniu, przeciągnięcie pierwszego elementu Div powinno przerysować łączącą linię svg (robię to na zdarzeniu dragover, wywołując funkcję 'handleDragOver'). Ale jeśli przeciągniesz pierwszy element div szybciej, zdarzenie drop nie zostanie wywołane, a div zachowa swoje oryginalne miejsce podczas rysowania linii.

W jaki sposób mogę zagwarantować, że zdarzenie drop zostanie wywołane za każdym razem.

Uwaga:

1. nie mogę używać żadnych ram, po prostu javascript
2. Nie mogę nie przerysować linię podczas przeciągania.
3. funkcjonalność drag działa dobrze, gdy nie robię żadnych obliczeń/odświeżanie w „handleDragOver”

Oto kod: http://jsfiddle.net/bhuwanbhasker/3yx9ds4m/1/

Answer 1

Proszę spojrzeć na zaktualizowanej skrzypce: http://jsfiddle.net/sejoker/d4vs9fgs/1/ następujące zmiany :

• manipulacji linii przenoszone z uchwytu dragover, aby handleDrop, przerysowanie linii raz podczas operacji drag'n'drop
• nazywając moveLine w setTimeout wydaje się poprawić użyteczność (opcjonalnie)

• drobne zmiany w funkcji moveLine połączyć elementy można przeciągać prawidłowo (opcjonalnie)

  function handleDrop(e) { 
  console.log('enter Drop'); 
  if (e.stopPropagation) { 
      e.stopPropagation(); // stops the browser from redirecting. 
  } 
  var offset = e.dataTransfer.getData('Text').split(','); 
  dragSrcEl.style.left = (e.clientX + parseInt(offset[0], 10)) + 'px'; 
  dragSrcEl.style.top = (e.clientY + parseInt(offset[1], 10)) + 'px'; 
  
  setTimeout(function(){ 
      var elem = svgLine.aLine; 
      if (elem !== null) { 
       var x = e.clientX - svgLine.left, 
        y = e.clientY - svgLine.top; 
       moveLine(x, y, elem, offset[2]); 
      }    
  }, 50)