Hello! I am trying to have one of my questions a freeform drag and drop (e.g., participants will move icons on a screen) and I want to save either the final image or the coordinates of the icons. I only want 2 of the items to move (imagine there is a square, and the icon for ‘lunch’ doesn’t move, and you move an icon for ‘breakfast’ and an icon for ‘dinner’. I tried the following code but I cannot seem to make it work. I was hoping that someone could have better insight as to what needs to be corrected. Thank you in advance! <div style="position: relative; width: 600px; height: 400px; margin: 20px auto; background: url('https://uwartsandsciences.pdx1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_eXemGs5D7yFpvhz') no-repeat center; background-size: contain; border: 1px solid #ccc;" id="slide-container"> <img style="width: 50px; position: absolute; top: 150px; left: 450px; cursor: grab;" src="https://uwartsandsciences.pdx1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_vrPsqekWIt26Rxt" id="breakfast" alt="Breakfast"> <img style="width: 50px; position: absolute; top: 180px; left: 230px; cursor: default;" src="https://uwartsandsciences.pdx1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_F7HsYTB4JUTYy8v" id="lunch" alt="Lunch"> <img style="width: 50px; position: absolute; top: 250px; left: 450px; cursor: grab;" src="https://uwartsandsciences.pdx1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_aWecqmidZuBBznx" id="dinner" alt="Dinner"></div><script> // Get references to the breakfast and dinner images (only these will be draggable) const draggableIcons = document.querySelectorAll('#breakfast, #dinner'); draggableIcons.forEach(icon => { let isDragging = false; let offsetX, offsetY; // Start dragging when mouse is pressed on the icon icon.addEventListener("mousedown", (event) => { isDragging = true; offsetX = event.clientX - icon.getBoundingClientRect().left; offsetY = event.clientY - icon.getBoundingClientRect().top; icon.style.cursor = "grabbing"; // Change cursor to 'grabbing' event.preventDefault(); // Prevent other default behaviors (like image drag) // Add mousemove and mouseup event listeners to manage drag document.addEventListener("mousemove", onMouseMove); document.addEventListener("mouseup", onMouseUp); }); // Handle moving the icon function onMouseMove(event) { if (isDragging) { icon.style.left = `${event.clientX - offsetX}px`; icon.style.top = `${event.clientY - offsetY}px`; } } // Stop dragging when mouse is released function onMouseUp() { isDragging = false; icon.style.cursor = "grab"; // Reset cursor to 'grab' document.removeEventListener("mousemove", onMouseMove); document.removeEventListener("mouseup", onMouseUp); } });</script>

Hi! The issue was that I kept the HTML and JS both in the HTML part of the question, once I separated them, it worked!

Drag and drop with custom HTML | Experience Community