web前端实例：JS鼠标拖拽效果

最新推荐文章于 2025-06-24 13:38:39 发布

Fanfffff720

最新推荐文章于 2025-06-24 13:38:39 发布

阅读量2.1k

点赞数 23

CC 4.0 BY-SA版权

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_74009702/article/details/136132650

本文介绍了如何使用JavaScript实现鼠标拖拽功能，包括原理、技术要点（如事件监听、元素定位、边界控制），并对比了触摸事件与鼠标事件的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

概要

JavaScript 鼠标拖拽效果是一种常见的交互技术，用于允许用户通过鼠标操作在页面上拖拽元素，并将其放置到新的位置。

实现原理

鼠标监听事件：使用 mousedown、mousemove 和 mouseup 事件来跟踪鼠标操作。
确定拖拽对象：在 mousedown 事件中确定被拖拽的对象，并记录其初始位置。
跟随鼠标移动：在 mousemove 事件中计算鼠标的位置变化，并将拖拽对象移动到相应的位置。
释放拖拽对象：在 mouseup 事件中释放拖拽对象，并执行相应的操作，如更新位置或触发其他事件。

技术要点

事件监听：使用 addEventListener 方法来监听鼠标事件，确保能够及时响应用户的操作。
元素定位：使用 CSS 中的 position 属性和 JavaScript 中的 top 和 left 属性来控制拖拽元素的位置。
计算位置：使用鼠标事件的 clientX 和 clientY 属性来获取鼠标相对于视口的位置，并结合拖拽对象的初始位置计算其相对位置。
计算相对位置

// 获取可拖拽的元素和父容器
const element = document.getElementById('draggableElement');
const parent = element.parentElement;

// 监听鼠标按下事件
element.addEventListener('mousedown', (event) => {
    // 阻止默认的鼠标事件，以防止在拖拽过程中发生意外的行为，比如选中文本
    event.preventDefault();
    
    // 记录初始鼠标位置和被拖拽对象的初始位置
    co