Почему при создании drag&drop появляется ошибка box.addEventListener is not a function

Мне нужно сделать драгндорп для нескольких изображений. Я написал код, он работает только для одного изображения.

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

Если я меняю document.querySelector("#box") на document.querySelectorAll("box"), то появляется ошибка Uncaught TypeError: box.addEventListener is not a function.

Понимаю, что сейчас возвращается массив элементов, но возникает вопрос как вернуть событие для каждого элемента.