如何在javascript中移动一个div与另一个div_Javascript_Mouseevent

如何在javascript中移动一个div与另一个div

javascript

如何在javascript中移动一个div与另一个div,javascript,mouseevent,Javascript,Mouseevent,我正在尝试制作一个包含两个盒子的web应用程序，一个盒子包含在另一个盒子中。用户应该能够单击并移动内框，但是，用户不应该能够将此框移动到外框的范围之外。用户可以通过在外框的一条边上拖动内框来移动外框。我知道如何移动内框，但问题是如何使用此限制移动另一个框。有人能帮我吗？以下是我迄今为止所做的： <!doctype html> <head> <title>JavaScript Game</title> <style> #conta

我正在尝试制作一个包含两个盒子的web应用程序，一个盒子包含在另一个盒子中。用户应该能够单击并移动内框，但是，用户不应该能够将此框移动到外框的范围之外。用户可以通过在外框的一条边上拖动内框来移动外框。我知道如何移动内框，但问题是如何使用此限制移动另一个框。有人能帮我吗？以下是我迄今为止所做的：

    <!doctype html>
<head>
<title>JavaScript Game</title>
<style>
#container {
height:400px;
width:600px;
outline: 1px solid black;
position:absolute;
left:50px;
top: 0px;
background-color:green;
}
#guy {
position:absolute;
height:50px;
width:50px;
outline: 1px solid black;
background-color:red;
left: 200px;
top: 200px;
}
</style>
</head>
<body>

<div id="container"></div>
<div id="guy"></div>
<script>
var guy=document.getElementById("guy");
var cont=document.getElementById("container");
var lastX,lastY; // Tracks the last observed mouse X and Y position


guy.addEventListener("mousedown", function(event) {
    if (event.which == 1) {
      lastX = event.pageX;
      lastY = event.pageY;
      addEventListener("mousemove", moved);
      event.preventDefault(); // Prevent selection
    }
  });

function buttonPressed(event) {
    if (event.buttons == null)
      return event.which != 0;
    else
      return event.buttons != 0;
  }
  function moved(event) {
    if (!buttonPressed(event)) {
      removeEventListener("mousemove", moved);
    } else {
      var distX = event.pageX - lastX;
      var distY = event.pageY - lastY;    
      guy.style.left =guy.offsetLeft + distX  + "px";
      guy.style.top = guy.offsetTop + distY  + "px";
      lastX = event.pageX;
      lastY = event.pageY;
    }
  }

</script>
</body>


JavaScript游戏
#容器{
高度：400px；
宽度：600px；
外形：1px纯黑；
位置：绝对位置；
左：50px；
顶部：0px；
背景颜色：绿色；
}
#家伙{
位置：绝对位置；
高度：50px；
宽度：50px；
外形：1px纯黑；
背景色：红色；
左：200px；
顶部：200px；
}
var guy=document.getElementById（“guy”）；
var cont=document.getElementById（“容器”）；
var lastX，lastY；//跟踪上次观察到的鼠标X和Y位置
guy.addEventListener（“鼠标向下”，函数（事件）{
if（event.which==1）{
lastX=event.pageX；
lastY=event.pageY；
addEventListener（“mousemove”，移动）；
event.preventDefault（）；//防止选择
}
});
按下功能按钮（事件）{
如果（event.buttons==null）
返回event.which！=0；
其他的
返回事件。按钮！=0；
}
功能移动（事件）{
如果（！按钮按下（事件））{
removeEventListener（“mousemove”，已移动）；
}否则{
var distX=event.pageX-lastX；
var distY=event.pageY-lastY；
guy.style.left=guy.offsetLeft+distX+“px”；
guy.style.top=guy.offsetTop+distY+“px”；
lastX=event.pageX；
lastY=event.pageY；
}
}

您可以添加一个复选框，查看移动该框是否会打破cont的界限

尝试使用getBoundingClientRect（）

检查下面的代码片段以了解工作代码。

全屏查看以获得最佳效果

var guy=document.getElementById（“guy”）；
var cont=document.getElementById（“容器”）；
var lastX，lastY；//跟踪上次观察到的鼠标X和Y位置
guy.addEventListener（“鼠标向下”，函数（事件）{
if（event.which==1）{
lastX=event.pageX；
lastY=event.pageY；
addEventListener（“mousemove”，移动）；
event.preventDefault（）；//防止选择
}
});
按下功能按钮（事件）{
如果（event.buttons==null）
返回event.which！=0；
其他的
返回事件。按钮！=0；
}
功能移动（事件）{
如果（！按钮按下（事件））{
removeEventListener（“mousemove”，已移动）；
}否则{
var distX=event.pageX-lastX；
var distY=event.pageY-lastY；
guy.style.left=guy.offsetLeft+distX+“px”；
guy.style.top=guy.offsetTop+distY+“px”；
// ********************************************************************
//获取边界框边框
var contBounds=guy.getBoundingClientRect（）；
var guyBounds=cont.getBoundingClientRect（）；
//检查下限
如果（contBounds.bottom>=guybunds.bottom）{
cont.style.top=cont.offsetTop+distY+px；
}
//检查上限
如果（contBounds.top尝试此链接，让您开始将“guy”放在“contatiner”中：
他们的示例显示了如何使一个元素只放入另一个元素中
至于移动容器……我认为你可以在moved函数中添加一些if-else语句，根据conatiner的轮廓测试家伙的位置，并在他们见面移动容器时说
我自己对javascript非常陌生，但这只是我对它的理解中的一个建议。
谢谢，但是你的“如果”语句不太好用，我试过很多if语句，到目前为止运气都不好，如果我明白你想要什么，那么这个语句就可以用了。在代码段中试试。@Icewine解决方案对我也有效，可能是你的浏览器。