div拖拽1.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style>
  *{
    margin:0;
    padding:0;
  }
  body{
    height:2000px;
  }
  #div{
    position:absolute;
    width:150px;
    height:200px;
    background-color: red;
  }
</style>
<body>
  <div id="div"></div>



  <script>
  window.onload = function(){
    console.log(document);
    var oDiv = document.getElementById("div");
    oDiv.onmousedown = function(e){
      e = e || event;
      var iDisX = e.clientX - oDiv.offsetLeft;
      var iDisY = e.clientY - oDiv.offsetTop;
      document.onmousemove = function(e){
        e = e || event;
        oDiv.style.left = e.clientX - iDisX + "px";
        oDiv.style.top = e.clientY - iDisY + "px";
        if(oDiv.offsetLeft >= document.body.offsetWidth - oDiv.offsetWidth){
          oDiv.style.left = document.body.offsetWidth - oDiv.offsetWidth + "px";
        }
        if(oDiv.offsetLeft <= 0){
          oDiv.style.left = 0;
        }
        if(oDiv.offsetTop >= document.body.offsetHeight - oDiv.offsetHeight){
          oDiv.style.top = document.body.offsetHeight - oDiv.offsetHeight + "px";
        }
        if(oDiv.offsetTop <=0){
          oDiv.style.top = 0;
        }
      }
    }
    document.onmouseup = function(){
        document.onmousemove = null;
      }
  }
  </script>
</body>
</html>