Javascript 如何防止可拖动图元移动到边界之外？

我使用代码制作了一个可拖动的元素，其工作方式与w3Schools中的示例大致相同：

//Make the DIV element draggagle:
dragElement(document.getElementById(("mydiv")));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

问题是我需要将元素限制在视口内部，并加上一点填充。 我有一个解决方案，您只需检查元素位置是否小于0，是否将其设置回0，或者是否大于宽度/高度，将其设置为宽度/高度。这还不够好，因为它会产生一种我不想要的刺耳的反弹效果

---

所以我想知道是否有更明显的解决办法？也不使用jQuery。

您需要跟踪可用视口（窗口大小调整可能会改变它），并确保元素不会跨越边界。如果该元素将跨越边界，则不应执行任何操作，而应让它穿过边界，然后将其放回原处。下面是一个工作示例

请注意，来自w3schools的代码示例在样式和功能使用方面已经非常过时了-有更优雅的方式支持在现代HTML中拖动

var PADDING=8；
var-rect；
变量视口={
底部：0，
左:0,，
右:0,，
排名：0
}
//使DIV元素成为draggagle：
dragElement（document.getElementById（（“mydiv”））；
功能牵引装置（elmnt）{
变量pos1=0，pos2=0，pos3=0，pos4=0；
if（document.getElementById（elmnt.id+“header”））{
/*如果存在，则标题是从中移动DIV的位置：*/
document.getElementById（elmnt.id+“header”）.onmousedown=dragMouseDown；
}否则{
/*否则，请从DIV内的任何位置移动DIV：*/
elmnt.onmousedown=dragMouseDown；
}
功能下拉列表（e）{
e=e | | window.event；
//在启动时获取鼠标光标位置：
pos3=e.clientX；
pos4=e.clientY；
//开始拖动时存储当前视口和图元尺寸
rect=elmnt.getBoundingClientRect（）；
viewport.bottom=window.innerHeight-填充；
viewport.left=填充；
viewport.right=window.innerWidth-填充；
viewport.top=填充；
document.onmouseup=关闭DrageElement；
//每当光标移动时调用函数：
document.onmousemove=elementDrag；
}
功能元素拖动（e）{
e=e | | window.event；
//计算新光标位置：
pos1=pos3-e.clientX；
pos2=pos4-e.clientY；
pos3=e.clientX；
pos4=e.clientY；
//检查以确保元素位于视口边界内
var newLeft=elmnt.offsetLeft-pos1；
var newTop=elmnt.offsetTop-pos2；
if（newLeftviewport.right
||newTop+rect.height>viewport.bottom
) {
//元素将到达边界，什么也不做。。。
}否则{
//设置元素的新位置：
elmnt.style.top=（elmnt.offsetTop-pos2）+“px”；
elmnt.style.left=（elmnt.offsetLeft-pos1）+“px”；
}
}
函数closeDrageElement（）{
/*释放鼠标按钮时停止移动：*/
document.onmouseup=null；
document.onmousemove=null；
}
}

#mydiv{
边框：1px纯黑；
高度：100px；
左：8px；
位置：绝对位置；
顶部：8px；
宽度：100px；
}

---

<代码> 当我在一个小片段中尝试它或一个小提琴（div实际上是不可拖动的-没有控制台中的错误）@ KADATH感谢，考虑添加样式或链接到问题本身。我只能给你一个提示，但我没有完整的解决方案。您可以在移动div之前测试值：

如果（elmnt.offsetLeft-pos1>=0）{elmnt.style.left=（elmnt.offsetLeft-pos1）+“px”}

，此示例将防止从左侧退出。但正如您所注意到的，它会导致文本被选中，而我还没有找到解决方案。。