鼠标拖拽1--JS

最新推荐文章于 2024-02-17 09:28:20 发布

一杆梅子酒~

最新推荐文章于 2024-02-17 09:28:20 发布

阅读量69

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_44144755/article/details/123285929

版权

鼠标拖拽(1)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 100px;
      height: 100px;
      background-color: pink;

      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>
<body>

  <div></div>

  <script>
    /*
      案例 - 拖拽

      问题: 什么时候出现效果 ?
        + 按下去不放(mousedown) : 允许拖拽状态
        + 鼠标抬起来(mouseup) : 允许拖拽状态
        + 鼠标移动(mousemove) : 盒子跟随鼠标移动
      问题: 在什么位置出现效果 ?
        + 按下去 : 盒子内
        + 抬起来 : 盒子内
        + 移动 : document
    */

    // 获取元素
    var ele = document.querySelector('div')

    // 准备一个开关
    var flag = false


    // 1. 绑定鼠标按下事件
    ele.onmousedown = function () {
      console.log('按下')

      // 打开开关
      flag = true
    }

    // 2. 绑定鼠标抬起事件
    ele.addEventListener('mouseup', function () {
      console.log('鼠标抬起')

      // 关闭开关
      flag = false
    })

    // 3. 绑定鼠标移动事件
    document.onmousemove = function (e) {
      // 这里的代码执行, 就会移动
      // 只要这里的代码不执行, 就不会移动了
      if (!flag) return

      var x = e.clientX - ele.offsetWidth / 2
      var y = e.clientY - ele.offsetHeight / 2

      // 赋值
      ele.style.left = x + 'px'
      ele.style.top = y + 'px'
    }




  </script>
</body>
</html>