[JavaScript知识库]javaScript:结合mousedown、mousemove、mouseup事件，实现拖动方块在页面内移动（代码）

效果需求：鼠标长按实现拖拽该方块移动，鼠标松开后将方块停在当前的位置

?注意点如下：

• mousemove、mouseup是全局有效，使用时用document
• mousemove鼠标移动事件后，通过在mouseup里面设置this.onmousemove?=?null;即可实现触发鼠标抬起事件onmousemove
• 记得给点击的对象添加样式position:absolute

代码如下：

<style>
    *{margin: 0;padding: 0;}
    body{ 
      width: 2000px;
      height: 2000px;
    }
    div{
      width: 100px;
      height: 100px;
      background-color:bisque;
      margin-left: 100px;
      position: absolute;
    }
  </style>

<div></div>

<script>
  var box = document.querySelector('div');
 
  //点击DIV
  box.addEventListener('mousedown',function(e){
    // console.log(e)
    //DIV跟随鼠标移动
    document.onmousemove = function(e){
      var e = e || window.event
      box.style.top = e.pageY - 50 + 'px';
      box.style.left = e.pageX - 150 + 'px';
      
    } 
   
    document.onmouseup = function(e){
      
      //清除鼠标移动效果，触发mouseup 事件
			this.onmousemove = null;

      //把当前光标坐标给DIV
      var e = e || window.event
      box.style.top = e.pageY - 50 + 'px';
      box.style.left = e.pageX - 150 + 'px';
    } 
    
})
  
</script>

?

?

?

?

?

?

?