首页 > 其他分享> > js实现拖拽效果

js实现拖拽效果

2020-06-01 17:07:01 作者：互联网

<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元素要设置定位才可以进行移动。

标签：mouseHandler,鼠标,效果,offsetX,js,div,document,type,拖拽
来源： https://www.cnblogs.com/chenyingying0/p/13026085.html