Question

我正在使用html5＆＃39; draggable＆＃39;属性来拖动容器中的2个元素和svg行来连接这两个元素。连接后，拖动第一个Div应重新绘制连接的svg行（我通过调用＆＃39; handleDragOver＆＃39;函数来执行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';
}

如何确保每次都触发掉落事件。

请注意：

我无法使用任何框架，只需简单的javascript
拖动时我无法重绘。
拖动功能在我没有在＆＃39; handleDragOver＆＃39;

以下是代码：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)

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

1 个答案: