Imagine we have multiple divs displayed on a screen:
https://i.stack.imgur.com/jCtOj.png
...and our goal is to move them collectively, either to the left:
https://i.stack.imgur.com/KBfXC.png
...or to the right:
https://i.stack.imgur.com/c1cUw.png
An initial approach might involve iterating through each element, capturing its current position, and applying a standard shift amount to all divs, as shown below:
function set_element_positions(new_top, new_left) {
var all_elems = document.getElementsByClassName("my_div");
for(var i=0; i < all_elems.length; i++) {
var rect = all_elems[i].getBoundingClientRect();
var current_top = rect.top;
var current_left = rect.left;
all_elems[i].style.top = current_top + new_top + "px";
all_elems[i].style.left = current_left + new_left + "px";
}
}
This function can be triggered during an as_change mouse event. For instance, a slider could invoke this function continuously while being adjusted, resulting in frequent calls to the function.
Initially, this method works effectively with a smaller number of divs, ensuring they move together in real-time. However, performance starts to degrade when dealing with a larger quantity of divs (approximately ~30).
Is there a more efficient strategy to simultaneously adjust the positions of all elements, allowing for rapid modification by a slider in real-time?