Necesito hacer un arrastrar y soltar para varias imágenes. Escribí un código de trabajo para una imagen.

 const box = document.querySelector("#box"); const offset = { x: null, y: null }; const getPosition = (e) => { const pageX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; const pageY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; return { pageX, pageY }; }; const mousemoveHandler = (e) => { const { pageX, pageY } = getPosition(e); box.style.left = pageX - offset.x + "px"; box.style.top = pageY - offset.y + "px"; }; const mousedownHandler = (e) => { const { pageX, pageY } = getPosition(e); const { x, y } = box.getBoundingClientRect(); const leftOffset = pageX - x; const topOffset = pageY - y; offset.x = leftOffset; offset.y = topOffset; window.addEventListener("mousemove", mousemoveHandler); box.classList.add("active"); }; const mouseupListener = async () => { window.removeEventListener("mousemove", mousemoveHandler); box.classList.remove("active"); offset.x = null; offset.y = null; }; box.addEventListener("mousedown", mousedownHandler); window.addEventListener("mouseup", mouseupListener); box.ondragstart = function() { return false; };

Si cambio document.querySelector("#box") a document.querySelectorAll("#box") o document.querySelectorAll("section-one__img") para que el código funcione para todos los elementos, aparece un error Uncaught TypeError: box .addEventListener no es una función