如何限制可拖拽div仅在指定父级div容器范围内移动

解决方案 #

你需要调整HTML结构、CSS定位规则、JS拖拽逻辑三个部分，实现拖拽元素限制在父容器内的效果：

1. 修改HTML结构

在外层添加父容器作为拖拽范围的边界：

<!-- 外层拖拽限制容器 -->
<div id="parentContainer">
  <div id="mydiv">
    <div id="mydivheader">my text</div>
  </div>
</div>

2. 修改CSS规则

给父容器设置相对定位，作为内部绝对定位元素的坐标基准：

/* 新增父容器样式，宽高可根据需求自定义 */
#parentContainer {
  width: 600px;
  height: 400px;
  border: 1px solid #ccc;
  position: relative;
  background-color: #f8f8f8;
}

#mydiv {
  position: absolute;
  z-index: 9;
  width: 100px; /* 可自定义拖拽元素尺寸 */
  text-align: center;
  border: 1px solid #d3d3d3;
  background-color: #fff;
}

#mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10; 
  background-color: #2196F3;
  color: #fff;
}

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 0 0mm 0mm 0mm; 
   } 
}

3. 修改JavaScript拖拽逻辑

在elementDrag函数中添加边界校验，限制拖拽元素的坐标范围：

//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    
    // 计算新坐标
    let newTop = elmnt.offsetTop - pos2;
    let newLeft = elmnt.offsetLeft - pos1;
    
    // 获取父容器和拖拽元素的尺寸参数
    const parent = elmnt.parentElement;
    const parentWidth = parent.clientWidth;
    const parentHeight = parent.clientHeight;
    const elWidth = elmnt.offsetWidth;
    const elHeight = elmnt.offsetHeight;
    
    // 边界校验，限制拖拽范围在父容器内
    newTop = Math.max(0, Math.min(newTop, parentHeight - elHeight));
    newLeft = Math.max(0, Math.min(newLeft, parentWidth - elWidth));

    // 赋值最终坐标
    elmnt.style.top = newTop + "px";
    elmnt.style.left = newLeft + "px";
  }

  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

以上修改完成后，拖拽元素就只能在#parentContainer内部移动，不会超出容器范围。

内容的提问来源于stack exchange，提问作者Saeed Eisakhani