拖拽元素JS实现方法

作者: vivianXIa | 来源:发表于2021-03-31 13:33 被阅读0次

js拖拽html元素工具类
拖拽元素JS实现方法
js实现元素拖拽
HTML5拖拽drag
js实现拖拽
拖拽API
HTML5实现拖拽
原生js实现拖拽（碰撞检测）
原生js实现元素的拖拽
JS+Vue实现元素拖拽

思路：

onmousedown ：鼠标按下的时候，记录鼠标所在的位置pageX,pageY
记录鼠标相对于盒子的位置距离
onmousemove ：鼠标移动的时候，实时计算鼠标的位置 - 相对差量（鼠标对于盒子）来计算鼠标的位置
onmouseup：清空onmousemove 的方法

PS

event.pageX,event.pageY 相对于整个文档（包括被卷起来部分）左上角的距离

<!doctype html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>拖拽</title>
    <style type="text/css">
      #box{
        position:fixed;
        left:100px;
        top:100px;
        background-color:red;
        width:300px;
        height:200px;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <div id="out"></div>
    <script>
      
      //scrollTop 文档滚动距离
      // offsetX offsetY 元素相对于文档的偏移量
      //clientX clientY 鼠标相对于窗口的左上角的位置
     //pageX pageY相对于文档左上角的位置（包括滚动卷起来的部分）
    
        var box = document.getElementById("box");
        box.onmousedown = function(event) {
           //获取鼠标再页面中的位置
          var pageX = event.pageX;
          var pageY = event.pageY;
          console.log(pageX,pageY);
          //获取鼠标按下时在盒子中的位置 
          var boxX = pageX - box.offsetLeft;
          var boxY = pageY - box.offsetTop;
          console.log(pageX,pageY);
          console.log(box.offsetLeft,box.offsetTop);
          console.log(boxX,boxY);
          document.onmousemove = function (event) {
            var event = event
            //获取鼠标在页面上的位置
            var pageX = event.pageX;
            var pageY = event.pageY;
            //box跟着鼠标移动
            box.style.left = pageX - boxX + "px";
            box.style.top = pageY - boxY + "px"
          } 
        }

        box.onmouseup = function (event) {
          document.onmousemove = null
        }

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