Qualtrics custom JS Custom works in question preview but not actual survey

I believe this is a somewhat common issue however I was unable to find a solution. I made a freeform drag-and-drop question on Qualtrics using the custom JS, which works just fine when I preview the question but does not work if I preview the block, preview the block, or take the survey. The JS portion of the code and some log statements are below, and I would appreciate it if anyone has any insight on how I could make it work!

Qualtrics.SurveyEngine.addOnload(function () {
    const draggableIcons = document.querySelectorAll('#breakfast, #dinner');


        draggableIcons.forEach(icon => {
            let isDragging = false;
            let offsetX, offsetY;

            icon.style.position = 'absolute';
            icon.style.zIndex = '1000';

            // 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);
            }
        });

});

I tried out some console.log statements, and when I am on ‘question preview’ I get the correct logs (e.g., “breakfast is being dragged to: (248.333px, 244.333px), Stop dragging breakfast at final position: (248.333px, 244.333px)”). So I can both drag, and see that the items are being loaded/the correct names and positions are being logged. When I am taking the survey or using ‘preview block’, the logs are suggesting that the items and the coordinates aren’t loading (e.g., “ is being dragged to: (, ), Stop dragging at final position: (, )”). Using addOnload or addOnready didn’t make a difference and I cannot seem to figure out what is causing the issue here!

I tried to create a freeform drag and drop question, I was expecting it to work as it does when I preview the question, but it stops working during the actual survey.