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

Posted 2023-05-08

【中文标题】由于拖动事件中的 DOM 操作，HTML5 可拖动的放置事件不会间歇性触发

【英文标题】：HTML5 draggable's drop event not getting triggered intermittently due to DOM manipulation in dragover event

【发布时间】：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/

【参考方案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)