js系列（更新中）-- 原生js实现拖拽

本文链接：https://blog.csdn.net/m0_49135418/article/details/115110915

基本思路：
拖拽状态 = false
鼠标在元素上按下的时候{   
  　　拖拽状态 = true
 　　 记录下鼠标的x和y坐标   
  　　记录下元素的x和y坐标   
  }  
 鼠标在元素上移动的时候{   
  　　如果拖拽状态为false就什么也不做。   
  　　如果拖拽状态是true，那么   
  　　元素y = 现在鼠标y - 原来鼠标y + 原来元素y   
  　　元素x = 现在鼠标x - 原来鼠标x + 原来元素x   
  }    
 鼠标按键在任何时候被松开{   
  　　拖拽状态 = false
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .container{
      width: 100%;
      height: 1500px;
      background-color: royalblue;
      position: relative;
    }
    .drag-box{
      width: 200px;
      height: 200px;
      background-color: red;
      position: fixed;
    }
  </style>
  <script>
    window.onload = function(){
      var dragObj = document.getElementsByClassName('drag-box')[0];//获取到盒子
      //console.log(dragObj)
      let dragging = false, mouseX,mouseY,objX,objY,diffX,diffY;
      
      dragObj.onmousedown = function(event){
        dragging = true;
        mouseX = event.clientX;
        mouseY = event.clientY;
        objX = dragObj.offsetLeft;//盒子初始位置
        objY = dragObj.offsetTop;
        diffX = mouseX - objX;//相对于鼠标距离盒子左边的位置
        diffY = mouseY - objY;
      }
      document.onmousemove = function(event){
        if(dragging){
          dragObj.style.left = event.clientX - mouseX + objX + "px";
          dragObj.style.top = event.clientY - mouseY + objY + "px";
          //边界问题
          if((event.clientX - diffX) <= 0){
            //左边界
            dragObj.style.left = 0 + "px";
            //window.innerWidth浏览器的宽度
          }else if((event.clientX - diffX) > (window.innerWidth - dragObj.offsetWidth)){
          //右边界
            dragObj.style.left = window.innerWidth - dragObj.offsetWidth + "px";
          }
          if((event.clientY - diffY)<=0){
            dragObj.style.top = 0 + "px";

          }else if((event.clientY - diffY) > (window.innerHeight - dragObj.offsetHeight)){
            dragObj.style.top = window.innerHeight - dragObj.offsetHeight+ "px";
          }
        }else {
          console.log("false");
        }
      }
        document.onmouseup = function(){
          dragging = false;
        }
    }
  </script>
</head>
<body>
  <div class="container">
    <div class="drag-box" style="left: 0;top: 50%"></div>
  </div>
</body>
</html>