原生js中使用addEventListener实现拖拽事件

最新推荐文章于 2024-06-13 10:12:32 发布
最新推荐文章于 2024-06-13 10:12:32 发布
阅读量4.2k 收藏 5
点赞数 2
分类专栏： 前端 文章标签： javas addEventListener
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alingyuzi/article/details/82953424
版权

addEventListener()方法用于指向元素添加事件，注意在IE8及更早版本，opera7.0及更早版本都不支持addEventListener(),但是可以使用attchEvent()方法来进行添加事件
提示：使用removeEventListener()来溢出addEventListener()方法添加事件
代码实现部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div style="width:100px; height:100px;position:absolute;left:0;top:0;background-color: red;"></div>
    <script type="text/javascript">
        var div = document.getElementsByTagName('div')[0];
        var disx,
            disy;
        div.addEventListener('mousedown',function(e){
            disx = e.pageX - parseInt(div.style.left);//记录鼠标当前的位置
            disy = e.pageY - parseInt(div.style.top);
            document.addEventListener('mousemove',mouseM)
            function mouseM(e){
                var event = e||window.event;//兼容了ie浏览器
                div.style.left = e.pageX - disx + "px";
                div.style.top = e.pageY - disy + "px";
            }
            div.addEventListener('mouseup',function(){
                var event = e||event;
                document.removeEventListener('mousemove',mouseM);
            })
        })
    </script>
</body>
</html>

如有错误欢迎提醒，共同学习

HadwinLing
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript实现拖拽事件（兼容IE8）
Vampirecally的博客
10-04 772
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <sytle type="text/css"> </sytle> <script>...
原生JS使用Canvas实现拖拽式绘图功能
12-11
在本文中，我们将探讨...综上所述，实现原生JS的拖拽式绘图功能涉及对Canvas API的熟练掌握，以及对鼠标事件和面向对象编程的理解。通过这种方式，我们可以创建一个自定义的、功能丰富的绘图工具，满足各种绘图需求。
addeventlistener事件参数_HTML5拖拽事件
weixin_39856630的博客
11-23 1058
HTML5拖拽事件1. 设置拖拽图片自带拖拽功能其他元素可设置draggable属性<div draggable="true"> div>例子:box.ondragend = function (e) { box.style.cssText = 'top:' + (e.clientY) + 'px;left:' + (e.clientX) + 'px'}1....
史上最全addEventListener示例整理
最新发布
weixin_56075623的博客
06-13 424
【代码】史上最全addEventListener示例整理。
原生js，onclick与addEventListener区别
兵临城下的专栏
07-05 1541
onclick添加的事件会被覆盖 addEventListener可以添加多个事件，先后执行var d=document.getElementById("btn"); //这个事件会被覆盖不会执行 d.onclick=function(){ console.log(1); } //这个事件正常执行 d.onclick=function(){ console.log(1); } /**/ /
原生js事件处理函数addEventListener、attachEvent兼容性处理
u010234868的专栏
06-26 201
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="按钮" id="btn"> <script src="js/common.js"></script> &lt.
学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
weixin_34327761的博客
12-02 84
    1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作)、srcElement(触发事件的事件源对象)和attachEvent("onclick",function(){...});     2. a. 实现拖放(Drag and Drop): 目前支支持IE, 若定制某对象为可拖放对象, 则必须覆盖目标对象的dragenter和dra...
原生JS加jQuery实现拖拽和单击上传文件
12-08
本文将深入探讨如何使用原生JavaScript和jQuery库来实现这两种功能。首先，我们要明白JavaScript提供了拖放API，而jQuery则可以简化DOM操作，使代码更简洁。 一、原生JavaScript实现拖放 1. **注册事件监听器**：...
原生js实现的移动端可拖动进度条插件功能详解
10-16
本文将深入探讨如何使用原生JavaScript实现这样一个功能。首先，我们先理解基本概念： 1. **进度条**：通常由一个长条形的容器（如`lineDiv`）和一个小方块（如`minDiv`）组成，小方块的位置代表进度值。 2. **...
原生JS实现图标图片拖拽
06-01
在本项目中，我们主要探讨如何使用原生JavaScript实现图标图片的拖放功能，并且确保这一功能能在所有浏览器中正常工作。拖放功能是网页交互中的一个重要特性，它允许用户通过鼠标或触摸设备将元素从一处拖动到另一处...
纯js实现可拖拽和点击的悬浮球
04-01
通过这个例子，我们可以学习到JavaScript中的事件监听、DOM操作以及如何通过CSS和JavaScript结合实现动态效果。这样的技能对于前端开发者来说是至关重要的，因为它们能帮助创建更丰富、更交互式的网页应用。
原生js之addEventListener,removeEventListener
weixin_33991418的博客
05-14 105
使用addEventListener添加事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
小白必看——原生JS解决addEventListener ()以及attachEvent()兼容问题
qq_31232201的博客
08-26 1175
原生JS解决兼容问题 为一个元素绑定多个事件的时候我们可以使用 obj.addEventListener( ) 但是我们需要考虑兼容问题，这种方法在IE8以下不支持 所以我们就需要另一种方法去解决IE中的问题; addEventListener ()的使用方法 obj.addEventListener("绑定的事件类型", 回调函数, 布尔值); /*参数一 * 绑定的事件类...
【原生JS】addEventListener 和 on 的区别
zuncle的博客
02-08 673
为什么需要addEventListener？先来看一个片段： html代码<div id="box">追梦子</div>用on的代码window.onload = function(){ var box = document.getElementById("box"); box.onclick = function(){ console.log("我是box1");
原生JS-----------ADDEVENTLISTENER添加事件和直接添加事件区别
weixin_44318855的博客
11-19 208
原生JS-----------ADDEVENTLISTENER添加事件和直接添加事件区别 1. a. document.querySelector("#a").onclick=function() {console.log("11111")} b. document.querySelector("#a").onclick=function(){console.log("222"...
鼠标拖动事件
yuyu_2019的博客
05-18 263
addEventListener和removeEventListener方法名（mMove）必须相同 function mMove (e) { // 移动事件 console.log(e) } // 拖动事件 svgE.addEventListener('mousedown', function (e) { // 点击 console.log(e) svgE.addEventListener('mousemove', mMove, false) // 移动 }) svgE.addEventL
addEventListener() JS事件监听 方法
weixin_56893328的博客
02-13 3857
事件对象的类型取决于特定的事件。playing 事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。loadeddata 事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。ratechange 事件在视频/音频（audio/video）的播放速度发送改变时触发。progress 事件在浏览器下载指定的视频/音频（audio/video）时触发。canplay 事件在用户可以开始播放视频/音频（audio/video）时触发。
[前端] H5 drag drop 拖动
网站前端/PHP/Android/其他
04-30 4504
一、介绍 mousedown mouseup mousemove dragstart dragend drag (在拖动元素上执行) 首先要在此元素上设置draggable="true" 为可拖 dragenter dragleave dragover (在目标元素上执行) drop 放下 (在目标元素上执行) dropzone表示可以放到哪个区域 <p d...
js实现简单的拖拽功能（解决IE浏览器兼容问题）
Sk22582的博客
09-19 521
js实现简单的拖拽功能（解决IE浏览器兼容问题）
原生js实现拖拽div
08-07
### 回答1： 我可以提供一些指引：要实现拖拽div，你首先需要监听div的mousedown，mouseup和mousemove事件。然后记录鼠标的坐标，并通过改变div的CSS left和top属性来实现div的拖拽。 ### 回答2： 原生 JavaScript 可以使用一些事件和方法来实现拖拽 div 的功能。以下是一个简单的示例： 首先，在 HTML 中添加一个可拖拽的 div 元素： ``` <div id="draggableDiv" draggable="true">可拖拽的 div</div> ``` 在 JavaScript 中，我们可以通过监听一些事件来实现拖拽的效果。首先，我们需要监听 div 的 mousedown 事件，当鼠标按下时开始拖拽。然后，我们需要监听鼠标移动事件来更新 div 的位置。最后，在鼠标抬起时停止拖拽。 ``` const draggableDiv = document.getElementById('draggableDiv'); let offsetX, offsetY; draggableDiv.addEventListener('mousedown', (event) => { offsetX = event.clientX - draggableDiv.offsetLeft; offsetY = event.clientY - draggableDiv.offsetTop; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); }); function onMouseMove(event) { draggableDiv.style.left = event.clientX - offsetX + 'px'; draggableDiv.style.top = event.clientY - offsetY + 'px'; } function onMouseUp() { document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); } ``` 在上面的代码中，我们通过计算鼠标点击位置与 div 左上角的偏移量，然后通过监听鼠标移动事件来更新 div 的位置。鼠标移动事件会不断触发，从而使得 div 跟随鼠标的移动而移动。最后，当鼠标抬起时，我们需要移除事件监听，停止拖拽。 通过以上代码，我们就可以实现一个简单的原生 JavaScript 拖拽 div 的效果。当鼠标按下 div 并移动时，div 会跟随鼠标的移动而移动，当鼠标抬起时停止拖拽。 ### 回答3： 要实现拖拽div的效果，可以使用原生JavaScript来完成。具体步骤如下： 1. 首先，在HTML中创建一个div元素，并给它设置一个id，用于后续的选择和操作。 ```html <div id="dragDiv">拖拽我</div> ``` 2. 在JavaScript中，创建一个变量来保存当前被拖拽的div元素。 ```javascript var dragElement = document.getElementById("dragDiv"); ``` 3. 添加mousedown事件监听器，当鼠标按下时，开始拖拽。 ```javascript dragElement.addEventListener("mousedown", dragStart); ``` 4. 在dragStart函数中，记录鼠标按下时的初始位置和div元素的初始位置。 ```javascript function dragStart(event) { event.preventDefault(); startX = event.clientX; startY = event.clientY; elementX = dragElement.offsetLeft; elementY = dragElement.offsetTop; document.addEventListener("mousemove", drag); document.addEventListener("mouseup", dragEnd); } ``` 5. 创建drag函数，在该函数中，根据鼠标移动的距离，更新div元素的位置。 ```javascript function drag(event) { var moveX = event.clientX - startX; var moveY = event.clientY - startY; dragElement.style.left = elementX + moveX + "px"; dragElement.style.top = elementY + moveY + "px"; } ``` 6. 创建dragEnd函数，在该函数中，移除鼠标移动和松开事件监听器。 ```javascript function dragEnd() { document.removeEventListener("mousemove", drag); document.removeEventListener("mouseup", dragEnd); } ``` 通过以上步骤，我们就可以实现一个简单的原生JavaScript拖拽div效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值