入门 JS 简单页面可移动的div1.在页面创建一个div并设置简单的样式2.使用JS操作DOM给div设置鼠标操作事件

1.在页面创建一个div并设置简单的样式

<style>
    * {
      margin: 0;
      padding: 0;
    }
    #demo {
      width: 200px;
      height: 200px;
      background: lightpink;
      position: absolute;
    }
 </style>
 <body>
    <div id="demo"></div>
</body>

2.使用JS操作DOM给div设置鼠标操作事件

<script>
  let demo = document.querySelector('#demo')
  let mouseMove = false;
  let x = 0, y = 0;
  demo.onmousedown = function (e) {
    x = e.pageX - demo.offsetLeft
    y = e.pageY - demo.offsetTop
    mouseMove = true
  }
  window.onmouseup = function () {
    mouseMove = false
  }
  window.onblur = function(){
    mouseMove = false
  }
  window.onmousemove = function (e) {
    e.preventDefault() //阻止默认行为
    if (mouseMove) {
      demo.style.left = e.pageX - x + "px"
      demo.style.top = e.pageY - y + "px"
    }
  }
</script>

预览图

鼠标点击拖动，松开结束拖动，离开窗口也结束拖动