首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

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

HTML代码:

代码语言:txt
复制
<div id="parent">
  <div id="div1"></div>
  <div id="div2"></div>
</div>

CSS代码:

代码语言:txt
复制
#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代码:

代码语言:txt
复制
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下进行拖动了。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券