Drag event not firing

const items = document.querySelectorAll(".item");

items.forEach((item) => {
  item.addEventListener("drag", (e) => {
    e.preventDefault();
    console.log(item);
    item.classList.add("dragging");
  });
});

.list {
  display: flex;
  column-gap: 1rem;
}

.item {
  width: 50px;
  height: 50px;
  background-color: red;
}

.item.dragging {
  background-color: blue;
}

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>