I believe similar questions have been asked quite a bit, but I have not seen a solution. I made a drag-and-drop question, which works just fine when I preview the question but does not work if I preview the block, preview the survey, or take the survey. The JS portion of the code is below, and I would appreciate it if anyone has any insight on how I could make it work! Thank you!
Qualtrics.SurveyEngine.addOnload(function () {
const draggableIcons = document.querySelectorAll('#breakfast, #dinner');
draggableIcons.forEach(icon => {
let isDragging = false;
let offsetX, offsetY;
// Start dragging
icon.addEventListener("mousedown", (event) => {
isDragging = true;
offsetX = event.clientX - icon.getBoundingClientRect().left;
offsetY = event.clientY - icon.getBoundingClientRect().top;
icon.style.cursor = "grabbing"; // Change cursor on drag
event.preventDefault();
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("mouseup", onMouseUp);
});
// Handle dragging
function onMouseMove(event) {
if (isDragging) {
icon.style.left = `${event.clientX - offsetX}px`;
icon.style.top = `${event.clientY - offsetY}px`;
}
}
// Stop dragging and reset cursor
function onMouseUp() {
isDragging = false;
icon.style.cursor = "grab"; // Reset cursor
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("mouseup", onMouseUp);
}
});
});
