Question

我正在尝试开发一个简单的应用程序。

当我们拖动 较大框内的小框时，较小框应在< strong>更大的盒子。

但是，它不能移出较大的盒子。我知道如何移动较小的盒子，但我不知道如何将其保留在较大的盒子中。有人可以帮我吗？

正如我提到的，我的代码正确移动了小盒子，但没有将其保留在大盒子中。

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

#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;
}

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

Answer 1

您需要将Guy的位置限制在容器的范围内。换句话说，guy的x位置可以至少是容器的x位置，最大为容器的x位置加上容器的width减去man的witdh。 y轴也是如此，但使用height而不是width。

var guy=document.getElementById("guy");
var cont=document.getElementById("container");
var lastX,lastY; // Tracks the last observed mouse X and Y position

var minX = cont.offsetLeft;
var maxX = minX + cont.offsetWidth - guy.offsetWidth;

var minY = cont.offsetTop;
var maxY = minY + cont.offsetHeight - guy.offsetHeight;

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;
      
      var targetX = guy.offsetLeft + distX;
      var targetY = guy.offsetTop + distY;
      
      guy.style.left = Math.min(maxX, Math.max(minX, targetX)) + "px";
      guy.style.top = Math.min(maxY, Math.max(minY, targetY)) + "px";
      
      lastX = event.pageX;
      lastY = event.pageY;
    }
  }

#container {
height:200px;
width:300px;
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: 100px;
top: 100px;
}

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

在另一个div中移动一个div

1 个答案: