js实现拖拽效果

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

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

>

>

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

js实现拖拽效果

相关文章