JS中鼠标拖拽

最新推荐文章于 2024-04-26 16:47:03 发布

辰辰北

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1.6k

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/weixin_42943920/article/details/122072853

版权

JavaScript 专栏收录该内容

77 篇文章 1 订阅

订阅专栏

关于鼠标拖拽，分三步
1-按下鼠标
2-移动鼠标，获取鼠标相对元素和窗口的位置（offset和client）
3-松开鼠标

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{margin: 0; padding: 0;}
    #box1{
      width: 100px;
      height: 100px;
      background-color: pink;
      position: absolute;
      top: 0px;
      left: 0px;
    }
  </style>
</head>
<body>
  <div id="box1">
  </div>
  <script>
    window.onload = function() {
      var box1 = document.querySelector('#box1')
      // 鼠标按下
      box1.onmousedown = (e) => {
        // 获取鼠标相对于box元素的位置
        e = e || window.event
        var divX = e.offsetX
        var divY = e.offsetY
        // 鼠标移动，将鼠标位置给到box1
        document.onmousemove = (e) => {
          e = e || window.event
          var x = e.clientX - divX >= 0 ? (e.clientX - divX) : 0
          var y = e.clientY - divY >= 0 ? (e.clientY - divY) : 0
          box1.style.left = x + 'px'
          box1.style.top = y + 'px'
        }
      }
      // 鼠标松开
      box1.onmouseup = () => {
        document.onmousemove = null
      }
    }
  </script>
</body>
</html>

辰辰北

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
JS中鼠标拖拽

关于鼠标拖拽，分三步1-按下鼠标2-移动鼠标，获取鼠标相对元素和窗口的位置（offset和client）3-松开鼠标<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
复制链接

扫一扫