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