Sự kiện thả của HTML5 có thể kéo không được kích hoạt không liên tục do thao tác DOM trong sự kiện kéo lên

Question

Tôi đang sử dụng thuộc tính html5 'draggable' để kéo 2 phần tử trong vùng chứa và dòng svg để kết nối hai. Sau khi kết nối, kéo Div đầu tiên sẽ vẽ lại đường kết nối svg (tôi thực hiện trên sự kiện kéo lên bằng cách gọi hàm 'handleDragOver'). Nhưng nếu bạn kéo div đầu tiên nhanh hơn, sự kiện thả không được kích hoạt và div duy trì vị trí ban đầu của nó trong khi dòng được vẽ.

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

Làm cách nào để đảm bảo sự kiện thả được kích hoạt mọi lúc.

Xin lưu ý:

1. tôi không thể sử dụng bất kỳ khuôn khổ, chỉ đơn giản javascript
2. tôi không thể không vẽ lại dòng trong khi kéo.
3. chức năng kéo hoạt động tốt khi tôi không làm bất kỳ tính toán/vẽ lại trong 'handleDragOver'

Đây là mã: http://jsfiddle.net/bhuwanbhasker/3yx9ds4m/1/

Answer 1

Hãy xem trên fiddle Cập nhật: http://jsfiddle.net/sejoker/d4vs9fgs/1/ thay đổi sau :

• dòng thao tác chuyển từ handler dragover để handleDrop, vẽ lại đường một lần trong hoạt động drag'n'drop
• gọi moveLine trong setTimeout dường như để cải thiện khả năng sử dụng (không bắt buộc)

• những thay đổi nhỏ trong chức năng moveLine để kết nối các yếu tố có thể kéo đúng cách (không bắt buộc)

  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)