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

Question

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

3

我正在尝试制作一个带有两个框的网络应用程序，其中一个框位于另一个框内。用户应该能够点击并移动内部框，但是，用户不应该能够将此框移动到外部框的范围之外。用户可以通过将内部框拖动到外部框的边缘之一来移动外部框。我知道如何移动内部框，但问题是如何在此限制下移动其他框。有人能帮帮我吗？以下是我所做的：

    <!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>

- scott green

2个回答

0

尝试使用此链接开始保持“人物”在“容器”内部：http://www.w3schools.com/html/html5_draganddrop.asp。他们的示例展示了如何使元素仅在另一个元素内部放置。

至于移动容器...我认为你可以在移动函数中添加一些if else语句，测试人物相对于容器轮廓的位置，并说当它们相遇时也移动容器。

我自己非常新于JavaScript，但这只是我对它的理解提出的建议。

- JT Lewis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Icewine · Accepted Answer

您可以添加一个检查，以查看移动框是否会打破 cont 的边界。

尝试使用 getBoundingClientRect()

请查看下面的示例代码。

全屏查看以获得最佳效果。

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";
     
       // ********************************************************************
      // get bounding box borders
      var contBounds = guy.getBoundingClientRect();
      var guyBounds = cont.getBoundingClientRect();
      
      // check bottom bounds
      if (contBounds.bottom >= guyBounds.bottom){
         cont.style.top = cont.offsetTop + distY  + "px";
      }
      
      // check top bounds
      if (contBounds.top <= guyBounds.top){
         cont.style.top = cont.offsetTop + distY  + "px";
      }
      
      // check left bounds
      if (contBounds.left <= guyBounds.left){
         cont.style.left = cont.offsetLeft + distX  + "px";
      }
      
      // check right bounds
      if (contBounds.right >= guyBounds.right){
         cont.style.left = cont.offsetLeft + distX  + "px";
      }
      // ********************************************************************
      
      lastX = event.pageX;
      lastY = event.pageY;
    }
  }

#container {
height:300px;
width:300px;
outline: 1px solid black;
position:absolute;
left:50px;
top: 0px;
background-color:#CCC;
}
#guy {
position:absolute;
height:50px;
width:50px;
outline: 1px solid black;
background-color:#000;
left: 200px;
top: 200px;
}

<div id="container"></div>
<div id="guy"></div>