由于在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)