Javascript 拖动后如何将div限制在其容器内？_Javascript_Drag

Javascript 拖动后如何将div限制在其容器内？

javascript

Javascript 拖动后如何将div限制在其容器内？,javascript,drag,Javascript,Drag,我想在其容器的边界内拖动一个div，但我无法将拖动光标（橙色div）限制在其容器的边界内：当它位于左侧和右侧边界上时，它在右侧移动太多。以下是JSFIDLE: 以及守则： <!DOCTYPE html> <html> <head> <title>Page Title</title> <style media="screen"> body{ width: 1500px; height: 1500px; } #cont

我想在其容器的边界内拖动一个div，但我无法将拖动光标（橙色div）限制在其容器的边界内：当它位于左侧和右侧边界上时，它在右侧移动太多。以下是JSFIDLE:
以及守则：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style media="screen">
body{
  width: 1500px; height: 1500px;
}
  #container{
    position:absolute;
    width: 300px; height: 80px; border: 1px solid red;
  }
  #cursor{
    position:absolute;
    width: 50px; height:100%;
    background-color: orange;
  }
  .dontSelect{
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
  }
</style>
</head>
<body>

<div id="container" class="dontSelect">
  <div id="cursor" class="dontSelect"></div>
</div>

<script>
var cursor = document.getElementById("cursor");
var container = document.getElementById("container");
var isMouseDown = false;
var w = container.offsetWidth, startPosClick = 0;
var leftContainerStart = container.offsetLeft;
cursor.style.left = leftContainerStart + (w/2) - (cursor.offsetWidth/2)+"px";
var leftCursorStart = cursor.offsetLeft;
//events
document.body.addEventListener("mousemove", function(e){
  if (isMouseDown){
    var dx = e.clientX - startPosClick;//*** HERE ***
    if (dx + leftCursorStart > 0 && (leftCursorStart + dx) < (leftContainerStart+w-cursor.offsetWidth)){
      cursor.style.left = dx+leftCursorStart+"px";
    }
  }
});
cursor.addEventListener("mousedown", function(e){
  isMouseDown = true;
  startPosClick = e.clientX;
  leftCursorStart = cursor.offsetLeft;
});
document.body.addEventListener("mouseup", function(){
  isMouseDown = false;
});

</script>
</body>
</html>


页面标题
身体{
宽度：1500px；高度：1500px；
}
#容器{
位置：绝对位置；
宽度：300px；高度：80px；边框：1px实心红色；
}
#光标{
位置：绝对位置；
宽度：50px；高度：100%；
背景颜色：橙色；
}
dontSelect先生{
-webkit用户选择：无；
-moz用户选择：无；
-o-用户选择：无；
-ms用户选择：无；
-khtml用户选择：无；
用户选择：无；
}
var cursor=document.getElementById（“cursor”）；
var container=document.getElementById（“容器”）；
var isMouseDown=错误；
var w=container.offsetWidth，startPosClick=0；
var leftContainerStart=container.offsetLeft；
cursor.style.left=leftContainerStart+（w/2）-（cursor.offsetWidth/2）+“px”；
var leftCursorStart=cursor.offsetLeft；
//事件
document.body.addEventListener（“mousemove”，函数（e）{
如果（isMouseDown）{
var dx=e.clientX-startPosClick；//***此处***
如果（dx+leftCursorStart>0&（leftCursorStart+dx）<（leftContainerStart+w-cursor.offsetWidth））{
cursor.style.left=dx+leftCursorStart+px；
}
}
});
cursor.addEventListener（“mousedown”，函数（e）{
isMouseDown=真；
startPosClick=e.clientX；
leftCursorStart=cursor.offsetLeft；
});
document.body.addEventListener（“mouseup”，function（））{
isMouseDown=错误；
});

谢谢

@Waxi我想了解代码中的错误。