js拖拽事件

Posted 2022-01-08 做个机灵鬼

拖拽

1.按下鼠标不放 onmousedown
2.鼠标移动 onmousemove
3.松开鼠标 onmouseup

监听事件采用并列写法

<script>
      window.onload = function () 
        /* 
            拖拽三步走
            1-按下鼠标 onmoudedown
            2-鼠标移动过程 onmousemove
            3-鼠标释放过程 onmuseup
            */
        var box = document.querySelector("div");
        var isMouseDown = false;
        var left = 0;
        var top = 0;
        box.addEventListener("mousedown",function (event) 
          //在键盘按住不放的事件是，要获取div的坐标
            isMouseDown = true;
            left = event.clientX - box.offsetLeft;
            top = event.clientY - box.offsetTop;
          ,false);
        document.addEventListener("mousemove",function (event) 
            if (isMouseDown) 
              var _x = event.clientX - left;
              var _y = event.clientY - top;

              box.style.left = _x + "px";
              box.style.top = _y + "px";
            
          ,false);
          document.addEventListener('mouseup',function(event)
              isMouseDown = false;
             
          ,false)
      ;
    </script>