笔记大全

js实现模拟鼠标拖拽事件附实例

更新时间：2023-11-22

鼠标拖拽事件简述

鼠标拖拽事件是指用户通过鼠标左键按住并移动的操作，来拖拽当前界面中的某个元素。在Web开发中，鼠标拖拽事件通常应用于拖拽元素或某个元素的大小。

实现鼠标拖拽事件需要用到三个事件：mousedown、mousemove、mouseup。当鼠标左键按下后，触发mousedown事件，接下来鼠标移动时，触发mousemove事件，最后松开鼠标左键时，触发mouseup事件。


let box = document.querySelector('.box'); // 获取拖拽元素
box.addEventListener('mousedown', function(event) {
  // 鼠标左键按下
});

box.addEventListener('mousemove', function(event) {
  // 鼠标移动
});

box.addEventListener('mouseup', function(event) {
  // 鼠标左键松开
});

鼠标拖拽事件实现

实现鼠标拖拽事件需要完整的三个步骤，首先获取拖拽元素的位置，其次跟随鼠标移动对其位置进行改变，最后松开鼠标左键时停止拖拽。


let box = document.querySelector('.box'); // 获取拖拽元素
let x = 0; // 初始位置x
let y = 0; // 初始位置y
let drag = false; // 是否在拖拽中

box.addEventListener('mousedown', function(event) {
  x = event.pageX - box.offsetLeft; // 获取距离上一级元素左边框的距离
  y = event.pageY - box.offsetTop; // 获取距离上一级元素上边框的距离
  drag = true; // 标记已经在拖拽中
});

box.addEventListener('mousemove', function(event) {
  if (drag) { // 判断是否在拖拽中
    box.style.left = event.pageX - x + "px"; // 将距离左边框的距离变为鼠标位置距离左边框的距离
    box.style.top = event.pageY - y + "px"; // 将距离上边框的距离变为鼠标位置距离上边框的距离
  }
});

box.addEventListener('mouseup', function(event) {
  drag = false; // 停止拖拽
});

鼠标拖拽事件扩展

鼠标拖拽事件扩展有两种情况：一是限制拖拽范围，二是防止拖拽到其他元素上。

限制拖拽范围，可以在mousemove事件中，判断拖拽元素的位置是否超出了指定区域，如果超过了指定区域，则将拖拽元素的位置定位到指定区域内。


let box = document.querySelector('.box'); // 获取拖拽元素
let x = 0; // 初始位置x
let y = 0; // 初始位置y
let drag = false; // 是否在拖拽中

box.addEventListener('mousedown', function(event) {
  x = event.pageX - box.offsetLeft; // 获取距离上一级元素左边框的距离
  y = event.pageY - box.offsetTop; // 获取距离上一级元素上边框的距离
  drag = true; // 标记已经在拖拽中
});

box.addEventListener('mousemove', function(event) {
  if (drag) { // 判断是否在拖拽中
    let left = event.pageX - x; 
    let top = event.pageY - y; 
    let maxX = document.documentElement.clientWidth; // 获取浏览器宽度
    let maxY = document.documentElement.clientHeight; // 获取浏览器高度
    let minBoxX = box.offsetWidth; // 获取拖拽元素宽度
    let minBoxY = box.offsetHeight; // 获取拖拽元素高度

    // 限制拖拽范围
    if (left < 0) {
      left = 0;
    }
    if (left > maxX - minBoxX) {
      left = maxX - minBoxX;
    }
    if (top < 0) {
      top = 0;
    }
    if (top > maxY - minBoxY) {
      top = maxY - minBoxY;
    }

    box.style.left = left + "px";
    box.style.top = top + "px";
  }
});

box.addEventListener('mouseup', function(event) {
  drag = false; // 停止拖拽
});

防止拖拽到其他元素上，可以在开始拖拽时，将拖拽元素的z-index设置为最大值，防止其被其他元素覆盖。


let box = document.querySelector('.box'); // 获取拖拽元素
let x = 0; // 初始位置x
let y = 0; // 初始位置y
let drag = false; // 是否在拖拽中

box.addEventListener('mousedown', function(event) {
  x = event.pageX - box.offsetLeft; // 获取距离上一级元素左边框的距离
  y = event.pageY - box.offsetTop; // 获取距离上一级元素上边框的距离
  drag = true; // 标记已经在拖拽中
  box.style.zIndex = "999"; // 将拖拽元素的z-index值设置为最大，防止被其他元素覆盖
});

box.addEventListener('mousemove', function(event) {
  if (drag) { // 判断是否在拖拽中
    let left = event.pageX - x; 
    let top = event.pageY - y; 
    
    box.style.left = left + "px";
    box.style.top = top + "px";
  }
});

box.addEventListener('mouseup', function(event) {
  drag = false; // 停止拖拽
  box.style.zIndex = ""; // 将拖拽元素的z-index值恢复
});

总结

鼠标拖拽事件是一个很常见的操作，也是一个相对比较简单的操作。代码的实现并不困难，需要掌握的便是mousemove事件的使用，以及拖拽范围和拖拽覆盖的一些限制。为了保证代码的稳定性，可以通过代码实现鼠标拖拽事件，并考虑一些实际应用问题。

c语言编程笔录