HTML5 drag and drop event does not fire intermittently due to DOM manipulation in dragover event

Question

I use the html5 attribute 'draggable' to drag two elements in the container and the svg line to connect the two. After connecting, dragging the first Div, you need to redraw the svg connector string (I do this when dragging and dropping by calling the handleDragOver function). But if you drag the first div faster, the drop event does not fire, and the div keeps it in its original place while the line is being drawn.

function handleDragOver(e) { if (e.preventDefault) { e.preventDefault(); } //Some code doing DOM computation and manipulation } return false; //e.dataTransfer.dropEffect = 'move'; } 

How can I guarantee that the drop event fires every time.

Note:

• I can not use any framework, just javascript
• I cannot redraw the line while dragging and dropping.
• The drag and drop function works fine when I don't do any calculations / redraws in 'handleDragOver'

Here is the code: http://jsfiddle.net/bhuwanbhasker/3yx9ds4m/1/

Answer 1

Please see the updated script: http://jsfiddle.net/sejoker/d4vs9fgs/1/ the following changes:

• Linear manipulation moves from the dragover handler to handleDrop, redraws the line once during the drag'n'drop operation.
• calling moveLine in setTimeout seems to improve usability (optional)

• minor changes to the moveLine function for the correct connection of dragged items (optional)

   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)