如何检测一个 Div 是否在另一个 Div 之外？

Question

I am making a game and I am using div's instead of canvas.rect's and I want one div to always be inside of another div.我正在制作一个游戏，我使用的是 div 而不是 canvas.rect 的，我希望一个 div 始终位于另一个 div 内。 I ran into this problem when I made a test script that looked like this.当我制作一个看起来像这样的测试脚本时，我遇到了这个问题。

 var mousex, mousey; function mousepos(e){ mousex = e.clientX; mousey = e.clientY; document.getElementById("xy").innerText = mousex + " , " + mousey; } function testdiv(){ document.getElementById("testdiv").style.left = mousex; document.getElementById("testdiv").style.top = mousey; setTimeout(testdiv, 30); }

 #city{ border: 1px dotted white; background-color: lightgreen; height: 500; width: 500; resize: both; overflow: hidden; max-height: 500px; max-width: 500px; min-height: 100px; min-width: 100px; } #xy{ color: white; } #testdiv{ background-color: white; position: absolute; width: 100px; height: 100px; } #body{ background-color: black; }

 <body id="body" onload="testdiv()"> <center> <div id="city" onmousemove="mousepos(event);"> <div id="testdiv"></div> </div> <p id="xy"></p> </center> </body>

The code detects your mouse X and mouse Y when your mouse is over the big green div, then it puts the white div's left corner on your mouse X and mouse Y. My problem is that when my mouse is draging the white div down or right, I can drag it off of the green div.当您的鼠标悬停在大绿色 div 上时，代码检测您的鼠标 X 和鼠标 Y，然后将白色 div 的左角放在鼠标 X 和鼠标 Y 上。我的问题是，当我的鼠标向下或向右拖动白色 div 时，我可以将它从绿色 div 中拖出。

Is there a way I could fix this problem?有没有办法解决这个问题？

Answer 1

Since there are no supported parent selectors in the current JS.由于当前 JS 中没有支持的父选择器。

You could either use Jquery or CSS, I am listing both Javascript options, and CSS options您可以使用 Jquery 或 CSS，我列出了 Javascript 选项和 CSS 选项

Option 1: $("a.active").parents('li').css("property", "value");选项 1: $("a.active").parents('li').css("property", "value");
Option 2: Sibling Combination to match any ParentElement element that is preceded by an ChildElement element.选项 2：同级组合以匹配任何以ParentElement元素ChildElement元素。
// Just change the parent and child elemets below ParentElement ~ ChildElement { property: value; }

Answer 2

You can make a check before changing the child div position, if its new position is outside of where you want it to be, you can skip it.您可以在更改子 div 位置之前进行检查，如果其新位置不在您想要的位置，则可以跳过它。

Something like:类似的东西：

if (mouse.x > parent_div_width){
    return;
}
else {
   child_div_Xpos = mouse.x
}

Answer 3

You can to try this code:你可以试试这个代码：

  var mousex, mousey;

function mousepos(e) {
    mousex = e.clientX;
    mousey = e.clientY;
    document.getElementById("xy").innerText = mousex + " , " + mousey;
}
var coordCity = document.getElementById("city").getBoundingClientRect();
var elem = document.getElementById("testdiv");
let i = 0

function testdiv() {
    elem.style.left = mousex + 'px';
    elem.style.top = mousey + 'px';
    var coord = elem.getBoundingClientRect();
    if(coord.left < coordCity.left ||
      coord.right > coordCity.right ||
      coord.bottom > coordCity.bottom || 
      coord.top < coordCity.top) {
      console.log('rect is out');
    };
    i++;
    if(i === 100) {
        return;
    }
    setTimeout(testdiv, 50);
}

And you need add in css px to value of width and height:并且您需要将 css px 添加到宽度和高度的值中：

#city{
            border: 1px dotted white;
            background-color: lightgreen;
            height: 500px;
            width: 500px;
            resize: both;
            overflow: hidden;
            max-height: 500px;
            max-width: 500px;
            min-height: 100px;
            min-width: 100px;
          }

And always save youre nodes to variable, because it does youre code faster, I use variable i for stop test.并且始终将您的节点保存到变量，因为它可以更快地执行您的代码，我使用变量 i 进行停止测试。 You can use another solution.您可以使用其他解决方案。 I created next app: https://codepen.io/piotrazsko/pen/VrrZBq我创建了下一个应用程序： https : //codepen.io/piotrazsko/pen/VrrZBq

Answer 4

I figured out a simple, more understandable way to do this.我想出了一个简单的，更容易理解的方法来做到这一点。

I created a variables for the testdiv's width, height, x, y, x offset from mouse, and y offset from mouse.我为 testdiv 的宽度、高度、x、y、鼠标的 x 偏移量和鼠标的 y 偏移量创建了一个变量。

var divw = 50;
var divh = 50;

var divofx = 25;
var divofy = 25;

Then I made a variable for the city divs width.然后我为城市 divs 宽度做了一个变量。

var cityw = 500;

Then, I used screen.width / 2 to find the center of the screen.然后，我使用 screen.width / 2 来找到屏幕的中心。

var centerx = screen.width / 2;

Then, I made the size of the testdiv changeable at any time by putting the code below into the main function :然后，我通过将下面的代码放入主函数中，随时更改 testdiv 的大小：

document.getElementById("testdiv").style.width = divw;
document.getElementById("testdiv").style.height = divh;

Then I used the width variable to find the edges of the city div.然后我使用 width 变量来查找城市 div 的边缘。

Then, based off of the edges, I made some simple collision detecting if statements.然后，基于边缘，我做了一些简单的碰撞检测 if 语句。 I also did not need to change the Y mutch since it pretty mutch stays the same.我也不需要改变 Y mutch，因为它非常 mutch 保持不变。

        if(mousex + divw > centerx + (cityw / 2)){
          mousex = centerx + (cityw / 2) - divw;
        }
        else{
          document.getElementById("testdiv").style.left = mousex;
        }
        if(mousey > (cityw - divh) + 10){
          mousey = (cityw - divh) + 10;
        }
        else{
          document.getElementById("testdiv").style.top = mousey;
        }
        if(mousex < centerx - cityw / 2){
          mousex = centerx - cityw / 2;
        }
        if(mousey < 8){
          mousey = 8;
        }
        setTimeout(testdiv, 1);

Now the whole program looks like:现在整个程序看起来像：

<html>

  <head>

    <style>

      #city{
        border: 1px dotted white;
        background-color: lightgreen;
        height: 500;
        width: 500;
        overflow: none;
        max-height: 500px;
        max-width: 500px;
        min-height: 100px;
        min-width: 100px;
      }
      #xy{
        color: white;
      }
      #testdiv{
        background-color: white;
        position: absolute;
        width: 100px;
        height: 100px;
      }
      #body{
        background-color: black;
      }

    </style>
    <script>

    var mousex, mousey;
    var divw = 50;
    var divh = 50;
    var divofx = 25;
    var divofy = 25;
    var cityw = 500;

      function mousepos(e){
        mousex = e.clientX - divofx;
        mousey = e.clientY - divofy;
        document.getElementById("xy").innerText = mousex + " , " + mousey;
      }

      function testdiv(){
        var centerx = screen.width / 2;

        document.getElementById("city").style.width = cityw;
        document.getElementById("testdiv").style.width = divw;
        document.getElementById("testdiv").style.height = divh;

        if(mousex + divw > centerx + (cityw / 2)){
          mousex = centerx + (cityw / 2) - divw;
        }
        else{
          document.getElementById("testdiv").style.left = mousex;
        }
        if(mousey > (cityw - divh) + 10){
          mousey = (cityw - divh) + 10;
        }
        else{
          document.getElementById("testdiv").style.top = mousey;
        }
        if(mousex < centerx - cityw / 2){
          mousex = centerx - cityw / 2;
        }
        if(mousey < 8){
          mousey = 8;
        }
        setTimeout(testdiv, 1);
      }

    </script>

  </head>

  <body id="body" onload="testdiv()" onmousemove="mousepos(event);">

    <center>
      <div id="city" onmousemove="mousepos(event);">
        <div id="testdiv"></div>
      </div>

      <p id="xy"></p>
    </center>

  </body>

</html>

如何检测一个 Div 是否在另一个 Div 之外？

问题描述

4 个解决方案

解决方案1
0 2017-11-16 17:34:46

解决方案2
0 2017-11-16 17:40:05

解决方案3
0 2017-11-16 18:38:59

解决方案4
0 已采纳 2017-11-16 22:14:58

如何检测一个 Div 是否在另一个 Div 之外？

问题描述

4 个解决方案

解决方案1 0 2017-11-16 17:34:46

解决方案2 0 2017-11-16 17:40:05

解决方案3 0 2017-11-16 18:38:59

解决方案4 0 已采纳 2017-11-16 22:14:58

解决方案1
0 2017-11-16 17:34:46

解决方案2
0 2017-11-16 17:40:05

解决方案3
0 2017-11-16 18:38:59

解决方案4
0 已采纳 2017-11-16 22:14:58