鼠标的拖动效果

1、变量的设置
js 复制代码
let isDragging = false;
let startX;
let startY;
let endX;
let endY;
let box = null;
  • isDragging : 表示是否推拽
  • startX、startY:表示起始坐标,相对于元素
  • endX、endY:表示结束坐标,相对于元素
  • box:表示要拖动的盒子
2、设置监听事件

设置监听事件,并初始化盒子(box

js 复制代码
// 为鼠标按下事件设置监听
titleFile.addEventListener('mousedown', (e) => {
    box = createFileBox; // 初始化被移动的元素
    mouseMove(e); // 调用移动鼠标的函数
});
3、移动鼠标
  • 第一次移动
    • 首先判断是否为第一次移动,如果是第一次移动,那末直接让初始的位置为当前鼠标的位置。
    • 然后尝试获取盒子的位置,并初始化。
  • 非第一次移动
    • 将上一次移动的末位置作为当前的初始位置。
js 复制代码
function mouseMove(e){
    isDragging = true;
    if(startX  === undefined || startY === undefined) {
        startX = e.clientX;
        startY = e.clientY;
    } else {
        startX = e.clientX - endX;
        startY = e.clientY - endY;
    }
    let ox = box.style.left;
    let oy = box.style.top;
    if(ox === '' || ox === null || oy === '' || oy === null) {
        box.style.left = '0px';
        box.style.top = '0px';
    }
}
3、鼠标移动事件

由于要移动的盒子时使用的相对定位,因此导致坐标不一致,鼠标是根据左上角为原点进行定位,而我的是根据初始位置的中间位置进行定位。因此需要将鼠标的坐标转化为盒子所在坐标系的坐标。

js 复制代码
// 鼠标移动事件
document.addEventListener('mousemove', (e) => {
    if (isDragging) {
        e.preventDefault(); // 阻止默认行为
        // 计算要移动的距离,即,元素元素要移动的距离
        endX = e.clientX - startX;
        endY = e.clientY - startY;
        box.style.left = `${endX}px`;
        box.style.top = `${endY}px`;
    }
});
4、鼠标释放事件
js 复制代码
// 鼠标释放事件
document.addEventListener('mouseup', () => {
    isDragging = false;
});
5、清理鼠标事件
js 复制代码
function mouseClear() {
    startX = undefined;
    startY = undefined;
    endX = undefined;
    endY = undefined;
    if(box !== null) {
        box.style.left = '0px';
        box.style.top = '0px';
    }
    box = null;
}
相关推荐
灵感__idea16 分钟前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
爱装代码的小瓶子1 小时前
数据结构之队列(C语言)
c语言·开发语言·数据结构
Maybe_ch3 小时前
.NET-键控服务依赖注入
开发语言·c#·.net
超浪的晨3 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发
终焉暴龙王3 小时前
CTFHub web进阶 php Bypass disable_function通关攻略
开发语言·安全·web安全·php
hui函数3 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Edingbrugh.南空4 小时前
Aerospike与Redis深度对比:从架构到性能的全方位解析
java·开发语言·spring
Carlos_sam4 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8504 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
CodeCraft Studio4 小时前
借助Aspose.HTML控件,在 Python 中将 HTML 转换为 Markdown
开发语言·python·html·markdown·aspose·html转markdown·asposel.html