如何检测一个 Div 是否在另一个 Div 之外?
How Can I Detect If One Div Is Outside Another Div?
我正在制作游戏,我正在使用 div 而不是 canvas.rect,我希望一个 div 始终位于另一个 div 中.当我制作一个看起来像这样的测试脚本时,我 运行 遇到了这个问题。
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>
当您的鼠标悬停在大绿色 div 上时,代码会检测到您的鼠标 X 和鼠标 Y,然后它会将白色 div 的左角放在您的鼠标 X 和鼠标 Y 上。我的问题是,当我的鼠标向下或向右拖动白色 div 时,我可以将其拖离绿色 div。
有什么办法可以解决这个问题吗?
由于当前JS中没有支持的父选择器
您可以使用 Jquery 或 CSS,我列出了 Javascript 选项和 CSS 选项
- 选项 1:
$("a.active").parents('li').css("property", "value");
选项 2:Sibling Combination 匹配任何 ParentElement
前面有 ChildElement
元素的元素。
// Just change the parent and child elemets below
ParentElement ~ ChildElement {
property: value;
}
你可以在更改子div位置之前进行检查,如果它的新位置在你想要的位置之外,你可以跳过它。
类似于:
if (mouse.x > parent_div_width){
return;
}
else {
child_div_Xpos = mouse.x
}
您可以试试这个代码:
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);
}
并且您需要在宽度和高度的值中添加 css 像素:
#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;
}
并且始终将您的节点保存到变量中,因为这样您的代码速度更快,我使用变量 i 进行停止测试。您可以使用其他解决方案。
我创建了下一个应用程序:
https://codepen.io/piotrazsko/pen/VrrZBq
我想出了一个简单易懂的方法来做到这一点。
我为测试创建了一个变量div的宽度、高度、x、y、x偏移量
鼠标,和鼠标的 y 偏移量。
var divw = 50;
var divh = 50;
var divofx = 25;
var divofy = 25;
然后我为城市 div 的宽度做了一个变量。
var cityw = 500;
然后,我用screen.width / 2 找到了屏幕的中心。
var centerx = screen.width / 2;
然后,我通过将下面的代码放入主函数中,使测试div的大小可以随时更改:
document.getElementById("testdiv").style.width = divw;
document.getElementById("testdiv").style.height = divh;
然后我使用宽度变量找到城市的边缘div。
然后,基于边缘,我做了一些简单的碰撞检测 if 语句。我也不需要更改 Y 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);
现在整个程序看起来像:
<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 而不是 canvas.rect,我希望一个 div 始终位于另一个 div 中.当我制作一个看起来像这样的测试脚本时,我 运行 遇到了这个问题。
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>
当您的鼠标悬停在大绿色 div 上时,代码会检测到您的鼠标 X 和鼠标 Y,然后它会将白色 div 的左角放在您的鼠标 X 和鼠标 Y 上。我的问题是,当我的鼠标向下或向右拖动白色 div 时,我可以将其拖离绿色 div。
有什么办法可以解决这个问题吗?
由于当前JS中没有支持的父选择器
您可以使用 Jquery 或 CSS,我列出了 Javascript 选项和 CSS 选项
- 选项 1:
$("a.active").parents('li').css("property", "value");
选项 2:Sibling Combination 匹配任何
ParentElement
前面有ChildElement
元素的元素。// Just change the parent and child elemets below ParentElement ~ ChildElement { property: value; }
你可以在更改子div位置之前进行检查,如果它的新位置在你想要的位置之外,你可以跳过它。
类似于:
if (mouse.x > parent_div_width){
return;
}
else {
child_div_Xpos = mouse.x
}
您可以试试这个代码:
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);
}
并且您需要在宽度和高度的值中添加 css 像素:
#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;
}
并且始终将您的节点保存到变量中,因为这样您的代码速度更快,我使用变量 i 进行停止测试。您可以使用其他解决方案。 我创建了下一个应用程序: https://codepen.io/piotrazsko/pen/VrrZBq
我想出了一个简单易懂的方法来做到这一点。
我为测试创建了一个变量div的宽度、高度、x、y、x偏移量 鼠标,和鼠标的 y 偏移量。
var divw = 50;
var divh = 50;
var divofx = 25;
var divofy = 25;
然后我为城市 div 的宽度做了一个变量。
var cityw = 500;
然后,我用screen.width / 2 找到了屏幕的中心。
var centerx = screen.width / 2;
然后,我通过将下面的代码放入主函数中,使测试div的大小可以随时更改:
document.getElementById("testdiv").style.width = divw;
document.getElementById("testdiv").style.height = divh;
然后我使用宽度变量找到城市的边缘div。
然后,基于边缘,我做了一些简单的碰撞检测 if 语句。我也不需要更改 Y 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);
现在整个程序看起来像:
<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>