javascript - HTML drag and drop API bad performance, heavy hit testing - Stack Overflow

admin管理员组

文章数量:1417691

I am involved on a project that needs to use the drag and drop API with lots of drop zones and many DOM nodes so i am trying to optimize the dragging system as much as possible. I found out that in chrome dev tools performance tab, when dragging the most heavy operation is hit testing, i can understand that it needs hit testing to try to check if the dragging item can be dropped on the item below. The point here is that it is obvious that it is not possible to remove them, hit testing is necessary, but foreach task is executing hit testing twice. That has no sense for me. I want to understand if that cloned hit testing could be removed in some way because it could be a great performance difference.

To do a simple isolated test i tried with a drag&drop example of w3schools, taken from here .asp

The result of performance here if i zoom onto one task:

It can be seen that the hit test is duplicated, now i will send the same screenshow but in my project, so you can see that it could be a very big performance trouble on heavier examples.

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

<p>Drag the image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="" draggable="true" ondragstart="drag(event)" width="336" height="69">

本文标签： javascriptHTML drag and drop API bad performanceheavy hit testingStack Overflow