js实现快速拖拽（定时器版本）

11773322

已于 2024-04-26 10:30:38 修改

阅读量387

点赞数 7

分类专栏： JavaScript原生代码文章标签： javascript 前端开发语言

于 2024-04-18 10:14:02 首次发布

本文链接：https://blog.csdn.net/qq_43298353/article/details/137909596

版权

JavaScript原生代码专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、原理

onmousemove实时获取鼠标坐标，定时器刷新dom元素坐标。能较快实现拖拽。
注意：在较大幅度晃动鼠标时仍然会失效，元素尺寸越小拖拽效果越差（即元素拖拽速度越慢）。

二、代码

<html>
<div id="test" style="position:fixed;left:100px;top:100px;background-color:black;width:100px;height:100px;"></div>
<script>
  var dom=document.getElementById('test');
  var initX,initY,//初始坐标，鼠标相对元素的坐标
  timer,//定时器
  refreshRate=250;//刷新率250
  var mx,my;//当前鼠标坐标
  dom.onmousedown = function (event) {
          var p=getElPosition(dom);//获取dom初始坐标
          initX=event.clientX-p.x;
          initY=event.clientY-p.y;
          //console.log(initX,initY,event.clientX,event.clientY);
          timer=setInterval(function(){
            checkMove(event)
          },1000/refreshRate);
      }
      dom.onmousemove=function(event){//刷新鼠标当前坐标
          mx=event.clientX;
          my=event.clientY;
      }
      dom.onmouseup = function () {//移除定时器
              clearInterval(timer);
          }
      dom.onmouseout = function () {//移除定时器
              clearInterval(timer);
          }
      var checkMove = function (event) {//刷新元素显示
        // 移动事件
        // mx// 当前鼠标距离屏幕X的距离
        //my // 当前鼠标距离屏幕Y的距离

        // 获取页面宽高
        var bodyW = document.documentElement.clientWidth;
        var bodyH = document.documentElement.clientHeight;
        // 获取盒子宽高
        var boxH = dom.offsetHeight;
        var boxW = dom.offsetWidth;
        //可移动距离
        var avX = -initX + mx, avY = -initY + my;
        //console.log(bodyH,bodyW)
        console.log(666,event.clientX,event.clientY)
        if (avX < 0) avX = 0;
        if (avY < 0) avY = 0;
        if (boxW - initX + mx > bodyW) avX = bodyW - boxW;
        if (boxH - initY + my > bodyH) avY = bodyH - boxH;
        //修改元素坐标
        dom.style.left = avX + 'px';
        dom.style.top = avY + 'px';
        //console.log(avX,avY,mx,my)
    };
    var getElPosition = function(el){//获取元素绝对坐标,el为元素
    var t = el.offsetTop,
        l = el.offsetLeft;
    while( el = el.offsetParent){
        t += el.offsetTop;
        l += el.offsetLeft;
    }
    return {
        x : l ,
        y : t
    };
};
  </script>
</html>