js实现拖拽效果

<html> <head> <style> div { width: 100px; height: 100px; background: pink; position: relative; top: 10px;...

<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: pink;
        position: relative;
        top: 10px;
        left: 10px;
      }
    </style>
  </head>
<body>
<div>me</div>
<script>

var div=document.querySelector("div");
    var offsetX,offsetY;  //定义全局变量用于接收鼠标坐标的变量
    div.addEventListener("mousedown",mouseHandler);
    function mouseHandler(e){  //事件的执行函数自带参数e
      if(e.type==="mousedown"){  //e.type是执行事件的类型
        offsetX=e.offsetX;    
        offsetY=e.offsetY;   
        document.addEventListener("mousemove",mouseHandler) 
        document.addEventListener("mouseup",mouseHandler)  //如果有鼠标移动或松开事件的发生再次执行mouseHandler函数
      }else if(e.type==="mousemove"){      
        div.style.left=e.clientX-offsetX+"px"; //鼠标相对当前可视窗口的坐标 - 相对元素左上角的坐标 
        div.style.top=e.clientY-offsetY+"px";
        
      }else if(e.type==="mouseup"){  
        document.removeEventListener("mousemove",mouseHandler);
        document.removeEventListener("mouseup",mouseHandler);  //删除鼠标移动和鼠标松开事件
      }
    }

</script>

</body>
</html>

注意:div元素要设置定位才可以进行移动。

  • 发表于 2020-06-02 17:55
  • 阅读 ( 145 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除