入门 JS 简单页面可移动的div

最新推荐文章于 2022-05-12 15:42:06 发布

AkieMX

最新推荐文章于 2022-05-12 15:42:06 发布

阅读量204

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_46723475/article/details/106584958

版权

在这里插入图片描述

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>

预览图

鼠标点击拖动，松开结束拖动，离开窗口也结束拖动
在这里插入图片描述

AkieMX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
入门 JS 简单页面可移动的div

1.在页面创建一个div并设置简单的样式<style> * { margin: 0; padding: 0; } #demo { width: 200px; height: 200px; background: lightpink; position: absolute; } </style> <body> <div id="demo">&l.
复制链接

扫一扫