Using multiple sliders as an alternative to drag-and-drop, with dynamic Z-index control

I absolutely love this interactivity—great job, Jonathan!

That said, I did notice some inconsistencies with the "z-index" values throughout the activity. For example, when the goblet is moved, it correctly passes in front of the knife and fork. However, once it’s "dropped" or stationary, the fork or knife moves in front of the goblet when either of them is dragged. Upon debugging, it seems that the "z-index" is being reset to its initial value whenever an element is dropped or stops being moved. 

After analyzing the scene further, I believe the fork and knife should never pass beneath each other when switching positions. In real life, with one hand (or slider in this case), we’d lift and reposition one object at a time without either going underneath the other. But that’s just my perspective—hope you don’t mind these little observations!

Anyway, since all the actions occur when either slider moves, I tried to come up with a JavaScript solution to address this issue overall and ensure the code executes whenever either slider is moved. This way, the fork and knife never pass in front of the goblet. Additionally, the fork never passes beneath the knife when switching positions with it, and the knife never passes beneath the fork when switching positions with the fork.

Example:

const goblet = document.querySelector("[data-model-id='5xjQeS51pKT']");
const fork = document.querySelector("[data-model-id='6CjWcCjhI4H']");
const knife = document.querySelector("[data-model-id='6jDKIpbtGdv']");

function logZIndexChange(element, newZIndex) {
  let currentZIndex = window.getComputedStyle(element).zIndex;
  console.log(`${element.getAttribute('data-model-id')} - Current z-index: ${currentZIndex}`);

  element.style.setProperty("z-index", newZIndex, "important");

  let updatedZIndex = window.getComputedStyle(element).zIndex;
  console.log(`${element.getAttribute('data-model-id')} - New z-index: ${updatedZIndex}`);
}

logZIndexChange(goblet, "300"); // keep it same for all three triggers
logZIndexChange(fork, "100"); // 100 when the KNIFE moves. 200 when the FORK moves
logZIndexChange(knife, "200"); // 200 when the KNIFE moves, 100 when the FORK moves

// Of course, these values can be anything, as long as we understand the concept and know what we’re doing here.

Once again, thank you for sharing this with the community. I’ve learned so much from your example!