javascript - 在 div 中包含一个可拖动元素而不会溢出

Question

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

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

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

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

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

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

这是我的例子:https://jsfiddle.net/ezmatto0911/r38he9no/13/

Answer 1

更新:如@N3R4ZZuRR0 所述，我已经能够与 getBoundingClientRect() 相处，但我仍然遇到一些问题:

1. 当我将内部 div 拖动到父 div 的顶部和左侧边缘时，它会摇晃。
2. 一旦我将内部 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;
      }

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

这是我对这个样本的 fiddle :https://jsfiddle.net/ezmatto0911/jowb584a/1/