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

Question

我正在使用 html5 的“可拖动”属性在容器中拖动 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';
}

如何确保每次都触发放置事件。

请注意:

1. 我不会使用任何框架，只能使用普通的 javascript
2. 我不能在拖动时不重画线。
3. 当我不在“handleDragOver”中进行任何计算/重绘时，拖动功能工作正常

这是代码:http://jsfiddle.net/bhuwanbhasker/3yx9ds4m/1/

Answer 1

请查看更新后的 fiddle :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)