Javascript如何将DIV保持在窗口边界

Question

嘿，我有一个“盒子”div，它可以根据点击箭头移动它的位置。我怎样才能让 Box 不超出窗口的边界，或者换句话说，只是去边界而不是越过边界。

提供的 fiddle :

var elementStyle = document.getElementById("divId").style;

JSFiddle

Answer 1

我基本上更新了你的 fiddle ，你需要添加检查，如果你的检查没有通过，那么将新位置设置为 0。

      if (newPosition < 0) {
          elementStyle.top = 0;
      } else {
          elementStyle.top = newPosition + px;      
      }

在这里 fiddle : https://jsfiddle.net/8t9cqyqd/7/

对于底部和右侧，窗口将继续滚动。如果这不是您想要的，那么您需要获取窗口大小并进行相同类型的检查，然后将右侧和底部位置设置为容器大小减去移动框的大小。如果您愿意，我可以为此更新 fiddle 。

更新 fiddle 以处理“正确”方向:

https://jsfiddle.net/8t9cqyqd/9/