由于dragover事件中的DOM操作,HTML5 draggable的drop事件不会间歇性地触发

Question

我使用html5'draggable'属性来拖动容器中的2个元素和svg行来连接这两个元素.连接后,拖动第一个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)