js实现拖拽效果

js实现拖拽效果_第1张图片

<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: pink;
        position: relative;
        top: 10px;
        left: 10px;
      }
    style>
  head>
<body>
<div>mediv>
<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元素要设置定位才可以进行移动。

你可能感兴趣的:(js实现拖拽效果)