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

两个DIV不能在父DIV下拖动的原因是因为DIV元素默认是静态定位（position: static），静态定位的元素不受拖动的影响。要实现拖动效果，需要将DIV元素的定位属性设置为相对定位（position: relative）或绝对定位（position: absolute）。

相对定位的元素会相对于其正常位置进行移动，而绝对定位的元素会相对于其最近的已定位祖先元素进行移动。

以下是一个实现两个DIV在父DIV下拖动的示例代码：

HTML代码：

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

CSS代码：

#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;
}

JavaScript代码：

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

在上述代码中，我们通过设置DIV元素的定位属性为绝对定位，并监听鼠标的mousedown、mousemove和mouseup事件来实现拖动效果。当鼠标按下时，记录鼠标的初始位置和DIV元素的初始位置，然后在mousemove事件中计算鼠标的偏移量，并根据偏移量更新DIV元素的位置。当鼠标松开时，移除事件监听器。

这样，两个DIV就可以在父DIV下进行拖动了。