为什么两个DIV不能在父DIV下拖动？

<div id="parent">
  <div id="div1"></div>
  <div id="div2"></div>
</div>

#parent {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid black;
}

#div1, #div2 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
}

#div1 {
  top: 0;
  left: 0;
}

#div2 {
  top: 200px;
  left: 200px;
}

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var parent = document.getElementById("parent");

div1.addEventListener("mousedown", dragStart);
div2.addEventListener("mousedown", dragStart);

function dragStart(event) {
  var startX = event.clientX;
  var startY = event.clientY;
  var startLeft = parseInt(this.style.left) || 0;
  var startTop = parseInt(this.style.top) || 0;

  document.addEventListener("mousemove", drag);
  document.addEventListener("mouseup", dragEnd);

  function drag(event) {
    var deltaX = event.clientX - startX;
    var deltaY = event.clientY - startY;
    var newLeft = startLeft + deltaX;
    var newTop = startTop + deltaY;

    this.style.left = newLeft + "px";
    this.style.top = newTop + "px";
  }

  function dragEnd() {
    document.removeEventListener("mousemove", drag);
    document.removeEventListener("mouseup", dragEnd);
  }
}