由于拖动事件中的 DOM 操作，HTML5 可拖动的放置事件不会间歇性触发答案

【问题标题】：HTML5 draggable's drop event not getting triggered intermittently due to DOM manipulation in dragover event由于拖动事件中的 DOM 操作，HTML5 可拖动的放置事件不会间歇性触发
【发布时间】：2014-10-21 23:15:51
【问题描述】：

我正在使用 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 事件。

请注意：

我不能使用任何框架，只能使用普通的 javascript
拖动时无法重绘线条。
当我不在“handleDragOver”中进行任何计算/重绘时，拖动功能可以正常工作

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

【问题讨论】：

标签： javascript html svg draggable

【解决方案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)

【讨论】：