阅读 881

JavaScript实现鼠标点击拖拽

三个即将要用的事件

  • onmousedown 鼠标按下事件
  • onmouseup 鼠标抬起事件
  • onmousemove 鼠标拖动事件

三组浏览器常用属性

  • clientX 与 clientY (**当前元素点击时 **距离浏览器最边上的距离(left 与 top))
  • offsetLeft 与 offsetTop (当前元素 距离浏览器最边上的距离(left 与 top))
  • innerWidth 与 innerHeight (浏览器整体

定义一个我们即将要拖动的 div。

body {
  margin: 0;
  padding: 0;
}

.box {
  background: pink; 程序员爱爱 color you too?
  position: absolute;
}
复制代码
<div class="box" style="left: 100px; top: 100px; width: 100px; height: 100px;"></div>
复制代码

说明一下,需要在拖动时改变 div 的 left 和 top,所以设置定位给 div。

  • 为什么要给 div 设置行内样式呢?
  • :便于更好的 **获取 **和 修改

JavaScript部分 详细讲解原理

// 获取到 DOM 元素
const box = document.querySelector('.box')
复制代码

第一步:注册 onmousedown (鼠标按下事件)事件

当我们点击元素时需要获取到鼠标点击元素的位置。

box.addEventlistener('mousedown', function(event){
   // 元素距离最左边的位置,理解为:你的 left 值是多少
    let offsetLeft = box.offsetLeft
    let offsetTop = box.offsetTop
    	
   // 元素距离最左边的位置(注意:这个位置是鼠标点下去距离浏览器左边的位置,是包含 div 元素的)
    let x = event.clientX - offsetLeft
    let y = event.clientY - offsetTop
})
复制代码

现在根据 clientXclientY,获取到鼠标在 div 元素中的位置

现在我们点击一下 div 元素,看到 div 中的红点位置,是我们鼠标点击的位置,看到控制台中的输入。

1.jpg

我们每次点击都是在随机的一个位置,所以需要获取到每次鼠标点击在 div 元素上的位置。

第二步:监听 onmousemove 事件

document.onmousemove = function (event) {
    let left = event.clientX - x
    let top = event.clientY - y
}
复制代码

当鼠标点击在 div元素 上并且不松开的情况下,拖动着元素。

开始计算 div元素 的横纵值(left 和 top)

第三步:元素是否超出浏览器边界

东:右边

if((box.offsetLeft + box.style.width) > window.innerWidth){
   box.style.left = window.innerWidth - parseInt(box.style.width) + "px"
}
复制代码

南:下边

if((box.offsetTop + box.style.height) > window.innerHeight){
    box.style.top = window.innerHeight - parseInt(box.style.height) + 'px'
}
复制代码

西:左边

if (box.offsetLeft < 0) {    box.style.left = 0 + "px"}
复制代码

北:上边

if (box.offsetTop < 0) {
    box.style.top = 0 + "px"
}
复制代码

完整代码

HTML

<!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>AUTHOR:CUMIN</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .box {
      background: pink; programmer most love love pink
      position: absolute;
    }
  </style>
</head>

<body>
  <div class="box" style="left: 100px; top: 100px; width: 100px; height: 100px;"></div>
</body>
</html>
复制代码

JavaScript

const box = document.querySelector('.box')

    const mousedown = (event) => {
      console.log('鼠标点击位置 ———— 距离浏览器最左边的位置:'+event.clientX)
      console.log('元素距离浏览器最左边的位置:' + box.offsetLeft)
      let innerX = event.clientX - box.offsetLeft
      let innerY = event.clientY - box.offsetTop

      box.style.borderWidth = "1px";
      box.style.borderStyle = "solid";
      box.style.borderColor = "black";
      // 移动时
      document.onmousemove = function (event) {
        box.style.left = event.clientX - innerX + "px"
        box.style.top = event.clientY - innerY + "px"
      }

      // 抬起时
      document.onmouseup = function () {
        document.onmousemove = null
        document.mousedown = null
        control()
        box.style.borderWidth = "";
        box.style.borderStyle = "";
        box.style.borderColor = "";
      }
    }

    // 超出边界处理
    const control = function () {
      if (box.offsetLeft < 0) {
        box.style.left = 0 + "px"
      }

      if (box.offsetTop < 0) {
        box.style.top = 0 + "px"
      }

      if ((box.offsetLeft + parseInt(box.style.width)) > window.innerWidth) {
        box.style.left = (window.innerWidth - parseInt(box.style.width)) + "px"
      }

      if ((box.offsetTop + parseInt(box.style.height)) > window.innerHeight) {
        box.style.top = (window.innerHeight - parseInt(box.style.height)) + "px"
      }

    }

    // 按下时
    box.addEventListener('mousedown', mousedown, false)
复制代码

结印

文章分类
前端
文章标签