SortableJS not working on my website when visiting on mobile - almost crashes the mobile browser

Viewed 17

I'm a newbie here and a development beginner so any help would be great :)

SITUATION

I've built a website with SortableJS library to use drag'n'drop functionalities on a list of rearrangeable items. The idea of the website is to help music labels and vinyl enthusiasts to build their perfect tracklisting by rearranging titles.

ELEMENTS

code: https://github.com/saint-james-fr/vinyl-tracklisting demo: https://www.maxencerobinet.fr/vinyl-tracklisting/

PROBlEM

Since then, I was working on my own local repo and testing with my browser. I've recently uploaded my work to GitHub so I started visiting the website on mobile - but it made my browser crashes + none of the drag-and-drop functionalities are working. Can someone may have a look at my code to find what's going on?

HYPOTHESIS

Also, to handle the rearranging by the users I'm using this bit of code that in my opinion is a bit too massive. Initial goal was to make sure any changes in the DOM arborescence will launch functions to calculate and reinitialize tracks orders. Ex: moving track A3 to A1 => A3 becomes A1 etc.

window.addEventListener("DOMContentLoaded", function() {
var mutationObserver = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
  updatePosition("sideA");
  updatePosition("sideB");
  length("sideA");
  length("sideB");
  });
});
mutationObserver.observe(document.documentElement, {
  attributes: true,
  characterData: true,
  childList: true,
  subtree: true,
  attributeOldValue: true,
  characterDataOldValue: true
});        
    }, false);

Maybe this bit of code crashes my browser on mobile... Or something else! I'm testing on Android Chrome 105.0.5195.79

0 Answers
Related