JS Event 鼠标拖拽事件

最新推荐文章于 2022-02-27 20:40:23 发布
转载 最新推荐文章于 2022-02-27 20:40:23 发布 · 329 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://www.mk2048.com/blog/blog_hjbj2c1akj0j.html

本文详细解析了使用JavaScript实现鼠标拖拽事件的多种方法，包括如何使元素跟随鼠标移动，如何仅在鼠标左键点击元素后开始拖动，以及如何在释放鼠标左键后停止拖动。此外，还介绍了如何解决拖动过程中元素定位不准确的问题。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>JS Event鼠标拖拽事件</title>       
        <style>
            #box{width:200px;height:200px;background:#000;position:absolute;}
        </style> 

    </head>
    <body>

         <div id="box"></div>

         <script>
                 window.onload=function(){                                //onload  加载页面；
                 var oBox=document.getElementById("box");       //找对象
                 document.onmousemove=function(ev){              //通常在document中添加事件，不在body中添加事件；添加onmousemove鼠标事件；绑定在事件的匿名函数，值可以有一个参数，并且它就是事件对象；
                     var l=ev.clientX;
                     var t=ev.clientY;
                     //console.log(l);                                             //控制台显示鼠标的xy轴坐标
                     oBox.style.left=l+"px";
                     oBox.style.top=t+"px";                                //div盒子跟随鼠标动，鼠标在document浏览器窗口中移动到哪，div盒子跟随到哪
            };
          };
        </script>

    </body>

  </html>

 

=======================装作是 华丽的分割线===============================================

//解决鼠标动盒子跟着动的问题，改为   鼠标点击一下之后，盒子才跟着鼠标动

<script>
            window.onload=function(){               
                   var oBox=document.getElementById("box")；
            
                   oBox.onmousedown=function(){
                        document.onmousemove=function(ev){        
                              var l=ev.clientX;
                             var t=ev.clientY;
                             //console.log(l);                         
                             oBox.style.left=l+"px";
                            oBox.style.top=t+"px";                   
                           };
                   };
           };
 </script>

 

=======================装作是 华丽的分割线===============================================

//解决   鼠标点击一下之后，盒子才跟着鼠标动 的问题，改为 鼠标左键点击到div盒子之后开始挪动盒子，松开鼠标之后  盒子就不在动

        <script>
            window.onload = function() {
                var oBox = document.getElementById("box");

                oBox.onmousedown = function() {
                    document.onmousemove = function(ev) {
                        var l = ev.clientX;
                        var t = ev.clientY;
                        //console.log(l);                           
                        oBox.style.left = l + "px";
                        oBox.style.top = t + "px";
                    };
                    document.onmouseup=function(){
                        document.onmousemove=null;
                    };
                };
            };
        </script>

 

 

=======================装作是 华丽的分割线===============================================

//解决  鼠标点击盒子挪动 时候，盒子最左上角跳动到指针的位置 的问题；

 

        <script>
           
            window.onload = function() {
                var oBox = document.getElementById("box");
                oBox.onmousedown = function(ev) {
                    var disX=ev.clientX-oBox.offsetLeft;                  //计算X轴，div盒子左边框与鼠标之间的距离
                    var disY=ev.clientY-oBox.offsetTop;                  //计算Y轴，div盒子上边框与鼠标之间的距离   
                        
                        
                    document.onmousemove = function(ev) {
                        var l = ev.clientX-disX;                               //计算X轴，浏览器左边窗口与div盒子左边边框的距离
                        var t = ev.clientY-disY;                              //计算Y轴，浏览器上边窗口与div盒子上边边框的距离
                        console.log(l);
                        oBox.style.left = l + "px";
                        oBox.style.top = t + "px";
                    };
                    document.onmouseup = function() {
                    document.onmousemove = null;
                };
                
                    return false;                     //阻止默认事件的发生       
                };
                
            };
        </script>

JavaScript基础(32)_拖拽、鼠标移动事件
no15870678621的博客
08-11 1438
JS拖拽、鼠标移动事件
js 前端鼠标拖动事件实例
12-11
js 前端鼠标拖动事件实例
使用javaScript实现鼠标拖拽事件
11-27
本文实例为大家分享了js实现鼠标拖拽事件的具体代码，供大家参考，具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; } div{ position: absolute; top: 200px;/*div的y轴*/ left: 150px;/*div的x轴*/ width: 300px;
js拖拽事件
yanjin_xiaoxiao的博客
02-27 5497
<!doctype html> <html> <head> <metacharset="utf-8"> <title>index</title> <style> *{ margin:0px; padding: 0px; } #box1{ width:100...
JavaScript鼠标拖拽事件
weixin_46409887的博客
03-31 324
图片如下: css代码 <style> *{ margin:0; padding:0; } #box{ width: 200px; height: 200px; background: url("./img/aio.png") no-repeat; backgrou...
JS鼠标拖拽实例分析
10-23
通过以上的分析，我们可以看到，实现JS鼠标拖拽功能，既需要对鼠标事件的准确把握，也需要对DOM和CSS属性的熟练应用。通过动态改变页面元素的位置属性，我们可以创造出丰富多彩的用户交互体验。而本实例所展示的代码...
js实现鼠标拖拽多选功能示例
10-19
在JavaScript中实现鼠标拖拽多选功能是一种常见的交互设计，特别是在网页中处理列表或网格数据时。本示例介绍了一种方法，通过结合jQuery库来完成这个任务。下面我们将详细探讨实现这一功能的关键步骤和涉及的技术点...
js鼠标拖动事件
zhangcham的博客
02-03 270
html及css样式 <div id="box"></div> *{padding: 0;margin: 0;} #box{ width: 100px; height: 100px; background: #FFC0CB; position: absolute; } js实现拖动效果 box.onclick=fu...
js鼠标拖拽事件
xiaoqingpang的博客
12-22 3167
只记录left，top同理。 clientX：返回鼠标相对于浏览器的水平坐标； offsetLeft：返回当前对象距离浏览器（父对象）的左侧距离； offsetWidth：对象的可见宽度； onmousemove：鼠标移动事件； 连接点是鼠标放在div上拖动时的位置（坐标）不会改变的，起名字为unchangX； 鼠标拖动事件是利用position：absolute绝对定位改变l
js 鼠标拖拽事件
jiaweimin123的博客
10-24 527
第一步：获取元素，绑定按下事件 var red = document.getElementById('red'); //获取红色泡 var mouseOffsetX = 0, mouseOffsetY = 0; //初始定义偏移值 var isDrag = false; //是否可拖动 red.addEventListener('mousedown', function (e)
使用js中常用的鼠标事件实现一个拖拽的例子
热门推荐
kellywong的博客
06-20 1万+
一、js中常用的几个必备鼠标事件 onclick: 元素上发生鼠标点击时触发. ondblclick: 元素上发生鼠标双击时触发. onmousedown: 当元素上按下鼠标按钮时触发. onmouseup: 当在元素上释放鼠标按钮时触发. onmouseout: 当鼠标指针移出元素时触发. onmousemove: 当鼠标指针移动到元素上时触发. onmouseover: 当鼠标指针移动到元素上时
鼠标拖拽事件
weixin_44863091的博客
08-18 624
1.鼠标拖拽事件 var $p1 = document.getElementById('p1') // 被拖动的源对象可以触发的事件 // 1. ondragstart： 事件源拖动开始的时候触发 $p1.ondragstart = function() { console.log(11111); } // 2. ondrag： 事件源拖动过程中一直触发（ 可能在移动有可能没动） $
JS基础_拖拽（一）
兴趣是最好的老师
12-12 332
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } .
JavaScript鼠标拖拽事件小例子详解
weixin_34129696的博客
07-18 353
有时候我们在桌面上新建一个文件夹，大家都知道新建文件夹的位置是系统根据桌面上最后一个默认排序的，想把这个文件夹放在自己容易辨识的地方，可能是右下角，可能是右上角，那这个拖拽是怎么实现的呢？ 一、我们先写出来一个盒子： <div class='box'></div> 复制代码二、写盒子的样式，鼠标对于盒子来说是相对定位，所以一定要写定位 <style> ....
js监听鼠标拖拽事件
最新发布
05-14
<think>好的，我现在需要解决用户的问题：如何使用JavaScript监听鼠标拖拽事件的示例代码。用户之前可能参考过引用[1]里的模拟鼠标事件，但现在他们需要的是事件监听，而不是模拟操作。我需要确保回答结构清晰，步骤正确，并且代码符合实际应用。 首先，我应该回忆一下拖拽事件的基本原理。通常，拖拽涉及三个事件：mousedown、mousemove和mouseup。当用户按下鼠标（mousedown）时，开始跟踪移动，然后在移动过程中更新元素的位置，最后在释放鼠标（mouseup）时停止跟踪。 接下来，我需要考虑如何将这些事件结合起来。在mousedown事件中，需要记录初始位置，并为mousemove和mouseup添加事件监听器。但要注意，mousemove和mouseup应该在document上监听，而不是在元素本身，因为鼠标可能移出元素区域，导致事件丢失。 然后，处理元素的位置计算。需要获取元素当前的left和top值，并转换为数值，可能需要处理初始值的空情况，比如默认设置为0。然后根据鼠标移动的差值来更新元素的位置。 还要考虑性能问题，比如在事件处理函数中避免频繁的DOM操作，或者使用requestAnimationFrame来优化。但在这个基础示例中，可能先保持简单，直接更新样式。 另外，记得在mouseup事件后移除mousemove和mouseup的事件监听器，否则会导致内存泄漏和不必要的事件处理。 用户可能需要CSS部分的提示，比如设置元素的position为absolute，以便通过left和top属性移动。所以示例中应该包含CSS代码，或者至少说明这一点。 是否需要考虑浏览器兼容性？现代浏览器应该都支持这些事件，但可能需要处理一些细节，比如event.clientX和clientY的获取，以及preventDefault的使用来防止文本选中等默认行为。 最后，确保代码语法正确，变量命名清晰，注释得当，方便用户理解。同时，按照用户要求，行内数学公式用$...$，独立公式用$$...$$，不过这个问题可能不需要数学公式，但需要留意是否有相关内容。 总结步骤： 1. 获取拖拽元素。 2. 监听mousedown事件，记录初始位置和元素的位置偏移。 3. 在mousedown处理函数中，添加document的mousemove和mouseup监听。 4. mousemove处理函数中计算新的位置并更新元素样式。 5. mouseup时移除事件监听，清理操作。 6. 处理CSS，确保元素可拖动。 现在需要将这些步骤转化为代码，并检查是否有错误。例如，在计算offsetX和offsetY时，是否需要考虑元素的边框或padding？可能用户需要简单示例，所以暂时忽略，假设元素的定位基于左上角。 测试案例中，元素#draggable需要position: absolute;，否则left和top属性无效。所以在示例代码中应该包含CSS部分。 可能还需要在mousedown事件中调用e.preventDefault()，防止某些浏览器默认行为，比如文本选中。 现在编写代码，并确保每个步骤都有注释，帮助用户理解。 相关问题部分，需要生成与拖拽事件相关的问题，比如性能优化、移动端适配、边界限制等。</think>### JavaScript实现鼠标拖拽事件监听 实现鼠标拖拽功能需监听三个核心事件：`mousedown`（按下）、`mousemove`（移动）、`mouseup`（松开）。以下是完整代码示例及分步解析： ```html <!DOCTYPE html> <html> <head> <style> #draggable { width: 100px; height: 100px; background: #3498db; position: absolute; /* 必须设置为绝对定位 */ cursor: move; } </style> </head> <body> <div id="draggable"></div> <script> const element = document.getElementById('draggable'); let isDragging = false; let offsetX, offsetY; // 1. 监听鼠标按下事件 element.addEventListener('mousedown', (e) => { isDragging = true; // 计算鼠标相对元素左上角的偏移量 const rect = element.getBoundingClientRect(); offsetX = e.clientX - rect.left; offsetY = e.clientY - rect.top; // 2. 添加全局移动和释放监听（绑定到document防止鼠标移出元素外丢失事件） document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); e.preventDefault(); // 防止默认选中文本行为 }); // 3. 鼠标移动处理函数 const onMouseMove = (e) => { if (!isDragging) return; // 计算新位置（需减去初始偏移量） const newX = e.clientX - offsetX; const newY = e.clientY - offsetY; // 更新元素位置 element.style.left = `${newX}px`; element.style.top = `${newY}px`; }; // 4. 鼠标释放处理函数 const onMouseUp = () => { isDragging = false; // 移除全局事件监听 document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); }; </script> </body> </html> ``` ### 关键实现细节 1. **元素定位**：必须设置`position: absolute`，才能通过`left/top`修改位置[^1]。 2. **偏移量计算**：通过`getBoundingClientRect()`获取元素初始位置，避免直接使用`element.style.left`（可能为空字符串）。 3. **事件绑定范围**：将`mousemove/mouseup`绑定到`document`，确保鼠标快速移动时不会丢失事件。 4. **性能优化**：使用标志位`isDragging`避免无效计算，释放事件后及时移除监听器。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值