首页 > 其他分享 >完美实现按下鼠标移动元素功能

完美实现按下鼠标移动元素功能

时间:2024-01-18 15:44:25浏览次数:21  
标签:startX startY const 鼠标 完美 transform 按下 移动

先上代码

 1 const handleChangePosition = () => {
 2   const element = canvasBox.value as HTMLDivElement;
 3   let startX = 0, startY = 0, initialX = 0, initialY = 0;
 4 
 5   element.onmousedown = function (e) {
 6     // 获取当前的transform值
 7     const transform = window.getComputedStyle(element).transform;
 8     if (transform !== 'none') {
 9       const matrix = new DOMMatrixReadOnly(transform);
10       initialX = matrix.m41;
11       initialY = matrix.m42;
12     }
13 
14     // 记录起始位置
15     startX = e.clientX;
16     startY = e.clientY;
17 
18     // 添加鼠标移动事件监听器
19     document.onmousemove = function (em) {
20       requestAnimationFrame(() => {
21         const dx = em.clientX - startX + initialX;
22         const dy = em.clientY - startY + initialY;
23         element.style.transform = `translate(${dx}px, ${dy}px)`;
24       });
25     };
26   };
27 
28   document.onmouseup = function () {
29     // 移除鼠标移动事件监听器
30     document.onmousemove = null;
31   };
32 };

为什么要减去 startXstartY

这里的 startXstartY 代表了鼠标按下时的初始位置。在鼠标移动过程中,我们需要计算从这个起始点到当前鼠标位置的相对移动距离。这样做的目的是为了确定鼠标移动了多远,然后将这个距离应用到元素的平移上。

当鼠标移动时,em.clientXem.clientY 表示鼠标当前的位置。通过从当前位置减去初始位置(startXstartY),我们得到了鼠标相对于按下时的移动距离。然后,这个移动距离加上元素的初始位置(initialXinitialY)得到了元素的新位置。

如果不加上initialX 和initialY,鼠标点击和第一次移动时,startX 和startY总是与clientX和clientY相等,这样会导致元素每次移动都会先回到(0,0)的位置。

window.getComputedStyle(element).transformDOMMatrixReadOnly

window.getComputedStyle(element).transform: 这行代码的作用是获取元素当前的样式,包括由CSS或之前的JavaScript操作所应用的所有样式。在这里,我们关心的是transform属性,它包含了元素的变换信息,比如它是如何被平移或旋转的。

  • DOMMatrixReadOnly 对象: 当transform属性返回的不是none时,表示元素有一些变换。transform属性的值通常是一个矩阵或一个矩阵的字符串表示(比如matrix(1, 0, 0, 1, 100, 50))。为了更容易地读取这些值,我们使用DOMMatrixReadOnly来解析这个矩阵。这是一个专门用来处理二维和三维变换矩阵的Web API。下面是控制台打印的值

  • matrix.m41matrix.m42: 在一个2D变换矩阵中,m41m42 分别代表矩阵在X轴和Y轴的平移距离。通过读取这些值,我们可以得到元素当前的平移位置。
    有其他方法欢迎留言讨论

 

标签:startX,startY,const,鼠标,完美,transform,按下,移动
From: https://www.cnblogs.com/cstd/p/17972622

相关文章

  • 数字先锋 | 向“新”而生!天翼云携手中化信息按下化工行业变革加速器
    在当今全球经济不断迈向数字化和智能化的时代背景下,各个行业都在寻求数字化转型的路径,化工行业作为重要的基础产业之一,也积极响应并推动着数字化转型的进程。近年来,众多化工企业利用先进技术和数字化手段,不断优化生产流程、提高运营效率、降低成本,在可持续发展的道路上迈出坚实的......
  • 监听iframe中的鼠标点击事件
    <iframeid="iframe1"frameborder="0"name="iframe1"scrolling="no"src="https://www.baidu.com"><p>你的浏览器不支持iframes.</p></iframe>varIframeOnClick={resolution......
  • 数字先锋 | 向“新”而生!天翼云携手中化信息按下化工行业变革加速器
    在当今全球经济不断迈向数字化和智能化的时代背景下,各个行业都在寻求数字化转型的路径,化工行业作为重要的基础产业之一,也积极响应并推动着数字化转型的进程。近年来,众多化工企业利用先进技术和数字化手段,不断优化生产流程、提高运营效率、降低成本,在可持续发展的道路上迈出坚实的步......
  • Illustrator 2024:创意与技术的完美结合 mac/win版
    Illustrator2024是Adobe公司推出的一款专业的图形设计软件,它继承了Adobe系列软件的优点,是一款功能强大的创意工具。→→↓↓载Illustrator2024首先,Illustrator2024拥有直观的界面和强大的功能,使得用户可以轻松地创建和编辑各种矢量图形、插图、图标和排版设计等。无论是专业......
  • 实现鼠标横向滚动
    在一些页面中,我们需要实现鼠标的横向滚动,虽然可以通过shift+鼠标滚动来达到横向滚动的目的,但是用户体验并不好。下面代码来实现鼠标的横向滚动:dom<ulref="systemGroupUlRef"></ul>实现方法//滚动组件实例constsystemGroupUlRef=ref();//初始化与绑定监听事件方......
  • .NET中轻松应用SQLite:零配置数据库引擎的完美指南
     SQLite是一种轻量级的嵌入式数据库引擎,它在.NET中被广泛使用。SQLite是一个零配置的数据库引擎,不需要服务器,可以直接在应用程序中使用。下面是一个简单的示例,演示如何在.NET中使用SQLite,并提供了常见的查询、增加、修改和删除功能。首先,你需要在项目中安装 System.D......
  • 蓝牙鼠标FCC ID认证流程?
    蓝牙鼠标FCCID认证流程?1.提供样机2.提供申请表3.提供参数信息4.提供定频样机/定频软件5.提供产品相关资料6.签合同付款7.开案测试8.测试报告出具测试报告,确认报告没有问题,没有异议,申请证书,结案蓝牙鼠标FCCID认证流程?1.提供样机2.提供申请表3.提供参数信息4.提供定频样机/定频软件......
  • 一款可实现个性化配置的低代码开发平台,打造完美自定义首页
    通常系统软件都会有首页展示,是用户首次打开系统软件时看到的页面,是用户对软件的第一印象。同时不同的软件类型和目标用户群体对首页的风格和内容会有所差异,JVS低代码平台就可以通过自定义页面引用外部站点来设置成首页,还可以直接在nacos中设置配置文件来切换首页,从而可以提高用户对......
  • 不同网络下如何使用 PowerToys 无界鼠标?
    PowerToys无界鼠标可以用一个鼠标跳转到不同电脑,并且允许同步剪贴板(包括100MB内的文件),是一个挺强大的免费功能。不过这个功能存在限制:要求所有计算机都在同一网络上连接,这在家庭WIFI环境下很容易满足,但是校园网环境或办公网络环境下比较棘手。类似的实现途径,据我所知有罗技......
  • 请将鼠标悬停在下面的元素上,即可查看 2D 和 3D 转换之间的区别
    请将鼠标悬停在下面的元素上,即可查看2D和3D转换之间的区别:2Drotate3Drotatetransformcode<div><p>请将鼠标悬停在下面的元素上,即可查看2D和3D转换之间的区别:</p><style>#rotate2D,#rotate3D{width:80px;height:70px;color:white;......