Javascript 在div中包含可拖动的元素而不溢出

抱歉，我不知道这是一个简单的问题还是一个困难的问题，我只是一个JS新手，但我有一个问题：我在div中有一个可拖动的元素，它可以自由拖动。问题是，每当我将元素拖到包含div的边缘时，元素的各个部分都会因为“溢出：隐藏”（我故意这么做）而被隐藏，但是有没有办法让元素的边缘像是撞到包含div的边缘，而不是溢出

<div id="topDiv">
   parent div
  <div id="insideDiv">
    <br> draggable content
    <br>
  </div>
</div>

---

以下是我的示例：

更新：我已经能够处理@N3R4ZZuRR0提到的

getBoundingClientRect（）

，但我仍然遇到一些问题：

当我将内部div拖动到父div的顶部和左侧边缘时，它是不稳定的

一旦我将内部div拖到父div的底部和右侧边缘，我就无法找到正确的位置来“抛出”内部div

以下是我的更新代码：

 html, body {
        height: 100%;
        margin: 0;
      }

      #topDiv {
        background-color: lightblue;
        max-height: 50%;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      #insideDiv {
        background-color: pink;
        width: 30%;
        overflow-y: auto;
      }

上级部门

元素

var container=document.getElementById（'topDiv'）；
var-activeItem=null；
var-active=false；
container.addEventListener（“touchstart”，dragStart，false）；
container.addEventListener（“touchend”，dragEnd，false）；
container.addEventListener（“touchmove”，拖动，false）；
container.addEventListener（“mousedown”，dragStart，false）；
container.addEventListener（“mouseup”，dragEnd，false）；
container.addEventListener（“mousemove”，拖动，false）；
函数dragStart（e）{
如果（e.target！==e.currentTarget）{
主动=真；
activeItem=e.target；//这是我们正在与之交互的项
如果（activeItem！==null）{
如果（！activeItem.xOffset）{
activeItem.xOffset=0；
}
如果（！activeItem.yOffset）{
activeItem.yOffset=0；
}
如果（例如，类型==“touchstart”）{
activeItem.initialX=e.Touchs[0]。clientX-activeItem.xOffset；
activeItem.initialY=e.touchs[0]。clientY-activeItem.yOffset；
}否则{
log（“正在做某事！”）；
activeItem.initialX=e.clientX-activeItem.xOffset；
activeItem.initialY=e.clientY-activeItem.yOffset；
}
}
}
}
函数dragEnd（e）{
如果（activeItem！==null）{
activeItem.initialX=activeItem.currentX；
activeItem.initialY=activeItem.currentY；
}
主动=假；
activeItem=null；
}
函数拖动（e）{
如果（活动）{
如果（例如类型==“触摸移动”）{
e、 预防默认值（）；
activeItem.currentX=e.Touchs[0].clientX-activeItem.initialX；
activeItem.currentY=e.Touchs[0].clientY-activeItem.initialY；
}否则{
activeItem.currentX=e.clientX-activeItem.initialX；
activeItem.currentY=e.clientY-activeItem.initialY；
}
var div=document.getElementById（“topDiv”）；
var rect=div.getBoundingClientRect（）；
x=正左；
y=矩形顶部；
r=右直；
b=垂直底部；
var elementToCheck=document.getElementById（activeItem.id）；
var rect2=elementToCheck.getBoundingClientRect（）；
x2=2.2左；
y2=rect2.top；
r2=2.5右；
b2=2.5米；
log（'x:'+x+'，y:'+y+'，r:'+r+'，b:'+b）；
log（'x2:'+x2+'，y2:'+y2+'，r2:'+r2+'，b2:'+b2）；
如果（x2>x&&y2>y&&r2

---

下面是我的示例：

getBoundingClientRect（）

应该可以帮助您。对于

getBoundingClientRect（）

我的想法是使用它来获取元素的边界，然后将其与父div的边界进行比较。我的想法正确吗？抱歉，是的，这就是你如何使用

getBoundingClientRect（）

我将在得到解决方案后更新此线程

var container = document.querySelector("#topDiv");
var activeItem = null;
var active = false;

container.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);
container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);

function dragStart(e) {
    if (e.target !== e.currentTarget) {
        active = true;
        activeItem = e.target; // this is the item we are interacting with
        if (activeItem !== null) {
            if (!activeItem.xOffset) {
                activeItem.xOffset = 0;
            }
            if (!activeItem.yOffset) {
                activeItem.yOffset = 0;
            }
            if (e.type === "touchstart") {
                activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
                activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
            } else {
                console.log("doing something!");
                activeItem.initialX = e.clientX - activeItem.xOffset;
                activeItem.initialY = e.clientY - activeItem.yOffset;
            }
        }
    }
}

function dragEnd(e) {
    if (activeItem !== null) {
        activeItem.initialX = activeItem.currentX;
        activeItem.initialY = activeItem.currentY;
    }
    active = false;
    activeItem = null;
}

function drag(e) {
    if (active) {
        if (e.type === "touchmove") {
            e.preventDefault();

            activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
            activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
        } else {
            activeItem.currentX = e.clientX - activeItem.initialX;
            activeItem.currentY = e.clientY - activeItem.initialY;
        }
        activeItem.xOffset = activeItem.currentX;
        activeItem.yOffset = activeItem.currentY;
        setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
    }
}

function setTranslate(xPos, yPos, el) {
    currentPosX = xPos;
    currentPosY = yPos;
    el.style.transform = "translate(" + xPos + "px, " + yPos + "px)";
}

 html, body {
        height: 100%;
        margin: 0;
      }

      #topDiv {
        background-color: lightblue;
        max-height: 50%;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      #insideDiv {
        background-color: pink;
        width: 30%;
        overflow-y: auto;
      }

<div id="topDiv">
      <div>
        Parent Div
      </div>
      <div id="insideDiv">
        <br> element
        <br>
      </div>
    </div>

var container = document.getElementById('topDiv');
var activeItem = null;
var active = false;

container.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);
container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);

function dragStart(e) {
    if (e.target !== e.currentTarget) {
        active = true;
        activeItem = e.target; // this is the item we are interacting with
        if (activeItem !== null) {
            if (!activeItem.xOffset) {
                activeItem.xOffset = 0;
            }
            if (!activeItem.yOffset) {
                activeItem.yOffset = 0;
            }
            if (e.type === "touchstart") {
                activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
                activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
            } else {
                console.log("doing something!");
                activeItem.initialX = e.clientX - activeItem.xOffset;
                activeItem.initialY = e.clientY - activeItem.yOffset;
            }
        }
    }
}

function dragEnd(e) {
    if (activeItem !== null) {
        activeItem.initialX = activeItem.currentX;
        activeItem.initialY = activeItem.currentY;
    }
    active = false;
    activeItem = null;
}

function drag(e) {
    if (active) {
        if (e.type === "touchmove") {
            e.preventDefault();

            activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
            activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
        } else {
            activeItem.currentX = e.clientX - activeItem.initialX;
            activeItem.currentY = e.clientY - activeItem.initialY;
        }

        var div = document.getElementById("topDiv");
        var rect = div.getBoundingClientRect();
        x = rect.left;
        y = rect.top;
        r = rect.right;
        b = rect.bottom;

        var elementToCheck = document.getElementById(activeItem.id);
        var rect2 = elementToCheck.getBoundingClientRect();
        x2 = rect2.left;
        y2 = rect2.top;
        r2 = rect2.right;
        b2 = rect2.bottom;

        console.log('x: ' + x + ', y: ' + y + ', r: ' + r + ', b: ' + b);
        console.log('x2: ' + x2 + ', y2: ' + y2 + ', r2: ' + r2 + ', b2: ' + b2);

        if (x2 > x && y2 > y && r2 < r && b2 < b) {
          activeItem.xOffset = activeItem.currentX;
          activeItem.yOffset = activeItem.currentY;
          setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
        }else if (x2 <= x || y2 <= y || r2 >= r || b2 >= b){
          if (x2 <= x) {
            console.log('LEFT BOUND');
            activeItem.xOffset = x + 2;
          }

          if (y2 <= y) {
            console.log('TOP BOUND');
            activeItem.yOffset = y + 2;
          }

          if (r2 >= r) {
            console.log('RIGHT BOUND');
            activeItem.xOffset = r - 2;
          }

          if (b2 >= b) {
            console.log('BOTTOM BOUND');
            activeItem.yOffset = b - 2;
          }
          setTranslate(activeItem.xOffset, activeItem.yOffset, activeItem);
        }
    }
}

function setTranslate(xPos, yPos, el) {
    currentPosX = xPos;
    currentPosY = yPos;
    el.style.transform = "translate(" + xPos + "px, " + yPos + "px)";
}