由於在dragover事件中DOM操作而間歇性地觸發HTML5可拖動的拖放事件

Question

我正在使用html5「可拖動」屬性來拖動容器和svg行中的2個元素以連接兩者。 一旦連接，拖動第一個Div應該重繪連接svg線（我通過調用'handleDragOver'函數在dragover事件上做）。但是，如果您更快拖動第一個div，則不會觸發drop事件，並且在繪製線條時div保持原始位置。

function handleDragOver(e) { 
    if (e.preventDefault) { 
     e.preventDefault(); 
    } 
    //Some code doing DOM computation and manipulation 
    } 
    return false; 
    //e.dataTransfer.dropEffect = 'move'; 
} 

如何確保每次觸發drop事件。

請注意：

1. 我不能使用任何框架，只是簡單的JavaScript
2. 同時拖動我不能沒有重繪線。
3. 拖動功能正常工作時，我沒有做任何的計算/在「handleDragOver」

這裏重繪是代碼：http://jsfiddle.net/bhuwanbhasker/3yx9ds4m/1/

Answer 1

請把更新的小提琴一看：http://jsfiddle.net/sejoker/d4vs9fgs/1/ 以下更改：

• 線操作從的dragover的處理程序handleDrop移動，拖放操作過程中一旦重繪線
• 中的setTimeout調用moveLine似乎提高了可用性（可選）

• 在moveLine功能的微小變化來連接可拖動的元素正確（可選）

  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)