0

I have a JavaScript drag and drop function that I use (piggybacking off of the Dragula library) and one thing I have noticed is that it is gradually getting slower with each drag/drop action. If I could hazard I guess, I think its because the dragover event gets fired whenever the mouse moves which results in too many events which can be very costly and make the UI super slow. In order to prevent this from happening, I guess I would need to filter out the events and process only the a few of them instead.

How can I do this however, whilst I have the dependency on the Dragula library? Here is my JS code:

let boxArray, boxes, drake;

function refreshComponents() {
  boxArray = document.getElementsByClassName("box");
  boxes = Array.prototype.slice.call(boxArray);
  drake = dragula({containers: boxes});
}

refreshComponents();

setInterval(function() {
  refreshComponents();
}, 2000);

const onComponentDrop = () => {
  refreshComponents();
  let components = [];
  for (let i = 0; i < drake.containers.length; i++) {
    if (drake.containers[i].children.length > 0) {
      for (let j = 0; j < drake.containers[i].children.length; j++) {
        let tempTagName = drake.containers[i].children[j].localName;
        let tagName = `<${tempTagName}></${tempTagName}>`;
        components.push(tagName);
      }
    }
  }
  sessionStorage.setItem('components', JSON.stringify(components));
  window.parent.window.postMessage({"for": "user", "action": "component-added", "data": components}, '*')
};

// noinspection JSUnusedAssignment
drake.on('drop', onComponentDrop);

Note that the refreshComponents method is required to tell dragula how many draggable components I currently have on-screen as they get destroyed/re-created often.

methuselah
  • 12,766
  • 47
  • 165
  • 315
  • 1
    Are you sure you need to refresh `dragula` every 2 seconds ? Also, have you tried to use the "Performance" tab on the Chrome Devtools to see which function takes time to process ? – Seblor Nov 15 '19 at 16:24
  • I need a way to monitor changes in the DOM periodically, is there something else I can do? I have tried MutationObserver but my setup was rather crass so I ran into the same performance issues again. – methuselah Nov 15 '19 at 16:30

0 Answers0