原生js实现元素拖拽onmousedown/onmousemove/onmouseup

最新推荐文章于 2023-07-05 23:37:25 发布
最新推荐文章于 2023-07-05 23:37:25 发布
阅读量1k 收藏 4
点赞数 3
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43633329/article/details/114920361
版权

文章目录

前言

我们在网页操作的时候，经常用到鼠标拖拽元素的行为。本篇文章就来讨论一下鼠标拖拽元素的原理及简单的实现过程。

一、实现思路

首先鼠标拖拽要用到三大事件
onmousedown：鼠标选择元素
onmousemove：鼠标移动元素
onmouseup：释放元素，也就是先用鼠标点击元素，然后拖拽元素到某一位置，释放元素的过程。

那么如何进行拖拽移动呢，主要是根据我们鼠标移动时的坐标变化来实现的
伪代码如下：

鼠标在元素上按下时{
      
  拖拽状态 = 1   
  记录下鼠标的x和y坐标   
  记录下元素的x和y坐标   
  }  
 鼠标拖拽元素移动时{
      
  如果拖拽状态是0就什么也不做。   
  如果拖拽状态是1，那么{
     
  元素y = 现在鼠标y - 原来鼠标y + 原来元素y   
  元素x = 现在鼠标x - 原来鼠标x + 原来元素x   
  }    
 鼠标放开时{
      
  拖拽状态 = 0   
}

二、具体步骤

1.鼠标在元素上按下时

dv.onmousedown = function(e) {
   
        //鼠标获取x坐标和y坐标
        x = e.clientX;
        y = e.clientY;
        //获取左部和顶部的偏移量（坐标）
        l = dv.offsetLeft;
        t = dv.offsetTop;
        //开关打开
        isDown = true;
 }

2.鼠标拖拽元素时

window.onmousemove = function(e) {
   
    if (isDown
最低0.47元/天 解锁文章
WH小可爱
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
js拖拽事件
xhsvwf的博客
06-20 690
首先我们创建一个div标签，给div标签一个id，后面写js时要用到；再在style里面写上它的样式 在浏览器内打开是这个样子 然后就是js部分的内容，我们先声明一个变量 btn 来获取div里面的id，从而绑定之后的事件。 拖拽要用到三个事件，分别为onmousedown，onmousemove,onmouseup。下面是这三个事件的定义和功能 我们先写一个onmousedown的方法，该方法是鼠标按下时才能触发。再在该方法里面获取...
JavaScript -- onmousedown 事件
Learning By Doing
05-01 2973
html文件 onMousedown capture Important source data that someone might want to look at.
原生js鼠标事件onmousedown、onmousemove、onmouseup实现窗口的拖拽
u010234868的专栏
08-29 1665
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #nav { height: 30px; line-height: 30px; background-color: darkblue; paddin.
js事件之onmousedown和onmouseup
美丽的泡沫
07-22 7117
function mouseDown() { document.getElementById("p1").style.color="red"; } function mouseUp() { document.getElementById("p1").style.color="green"; } 请点击文本！mouseDown() 函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置
JS中鼠标拖拽div(onmousedown、onmousemove、onmouseup)
Fantasc的博客
08-11 4083
onmousedown：鼠标的按下事件 onmouseove：鼠标的移动事件 onmouseup：鼠标的松开事件 思路： 想实现鼠标拖拽div移动的效果，就得先获取到div，然后给div绑定鼠标按下的事件，在按下事件中绑定移动事件，在移动事件中将鼠标的坐标赋值给div即可实现div随鼠标移动而变换位置，但是只是这样的话，在鼠标松开之后div还是会跟着鼠标动，所以还要绑定鼠标松开的事件。在鼠标的送事件结束后，鼠标的一移动事件和松开事件就不需要在执行，需要执行就得出发鼠标按下事件，在最后得销毁移动和松开事件。
原生js实现拖拽移动与缩放效果
10-14
下面我们将详细探讨如何利用原生JS实现这两个功能。 首先，我们从拖拽移动开始。拖拽移动的基本思路是监听鼠标按下（mousedown）、鼠标移动（mousemove）和鼠标释放（mouseup）这三个事件。在`MoveClass`构造函数中...
原生js实现自由拖拽弹窗代码demo
10-22
在本文中，我们将深入探讨如何使用原生JavaScript实现一个可自由拖拽的弹窗功能。这个功能是通过HTML、CSS和JavaScript三者结合来完成的，下面我们将详细讲解每个部分的关键知识点。 首先，我们看HTML结构。在这个...
原生js实现拖拽功能基本思路详解
12-10
当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。 基本思路如下： 拖拽状态 = 0鼠标在元素上按下的时候{ 拖拽状态 = 1 记录下鼠标的x...
原生JS实现拖拽效果
01-18
本文实例为大家分享了JS实现拖拽效果的具体代码，供大家参考，具体内容如下 想要让整个元素移动需要三个事件： 鼠标按下 onmousedown 鼠标移动 onmousemove 鼠标抬起 onmouseup html <!-- 点击title拖拽 --...
原生js拖拽实现图形伸缩效果
10-15
《原生JS实现图形拖拽与伸缩效果详解》 在网页开发中，动态交互功能是提升用户体验的重要一环。本文将深入探讨如何利用原生JavaScript实现图形的拖拽及伸缩效果，这对于创建可自定义大小的界面元素或者富媒体应用来...
js函数中onmousedown和onclick的区别和联系探讨
11-30
这两个事件很常见。 了解这两个事件的区别，但是实际并没有使用到这两个事件的区别去做一些操作。 通常使用onclick的时候也可以使用onmousedown，使用onclick的时候更多一些。 今天碰到了非使用onmousedown不可的时候，故特此记录。 先说一下区别：onclick是在鼠标点击弹起之后触发的事件。onmousedown是在鼠标按下之后触发的事件。 简单的说onclick = onmousedown + onmouseup; 如果在某个地方按下鼠标后移开鼠标在另外一个地方松开鼠标会触发onmousedown事件，但是onclick事件却不会被触发。 我们今天要实现的功能是点击a
拖拽的实现
FANGDAWEI110的专栏
11-25 428
                                                              要实现拖拽元素必须调用四个函数      A：onmouseover（作用：当鼠标移动到上面的时候，获得该元素，即把它赋给一个公共变量A，以便在鼠标放开的时候调用，每个要移动位置的元素都要调用）      B：onmousedown（作用：当鼠标按下的时候，获得该元素赋给一个
js之onmousedown实现拖拽效果-控制范围
JackieDYH的博客
04-08 1572
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img{ position: absolute; width: 300px; hei...
Javascript：onmousemove 、alert 、onmousedown 、onmouseup、onmouseover、onmouseout 用法以及例子
最新发布
Cosmoshhhyyy的博客
07-05 1564
onmousemove 、alert 、onmousedown 、onmouseup、onmouseover、onmouseout的用法和效果，以及例子代码等。
html5 onmousedown,JavaScript onmousedown 事件：鼠标任何一个按键被按下
weixin_35252187的博客
06-20 518
JavaScript onmousedown 事件当鼠标按键(任何一个键)被按下时，会触发 onmousedown 事件，如下例子所示：在这个例子中，将鼠标放在图片上，当按下任何一个键时，就会弹出提示窗口：您点击了这幅图片！。您可以点击下面的图片试试：onmousedown 事件与 onClick 事件的区别onmousedown 事件与 onClick 事件在我们看来非常相似，其实 onClic...
Javascript实现拖拽效果
qq_61716556的博客
05-09 962
我们执行拖拽操作时， 1.按住某元素 2.移动鼠标 3.移动鼠标到相应位置后松开鼠标 基于以上操作，页面拖拽效果需要三个事件 onmousedown onmousemove onmouseup 在onmousedown事件中，我们需要定义函数表明，该元素被按住，即将进行移动操作，需要计算x坐标值，并触发后续的onmousemove事件。 在onmousemove事件中，我们需要计算元素坐标位置，根据鼠标移动改变元素位置，准备执行鼠标松开时的事件函数。 在onmouseup事件中，我们需要以
JavaScript onmousemove事件实现物体随鼠标移动
aolyu的博客
05-27 1000
JavaScript onmousemove事件实现物体随鼠标移动代码 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style
JavaScript的鼠标事件（js的鼠标事件，vue的鼠标事件）
weixin_65793170的博客
12-12 3841
js鼠标事件，相关属性： var div = document.getElementById("box") // 1、单击事件 onclick div.onclick = function(){ console.log("单击") } // 2、双击事件 ondblclick
overflow鼠标拖拽显示_JavaScript进阶之实现拖拽
weixin_39989875的博客
12-03 414
最近做到的react项目就有一个拖拽的需求，然后大概搜索了一下，找到了star比较高的react-dnd库，但是阅读react-dnd的官方文档还是有点难受的,因为概念性比较强，所以在介绍react-dnd之前我们来实现原生拖拽原生实现拖拽 Mouse事件实现拖拽在h5之前，原生实现拖拽是根据Mouse事件来实现的，需要用到以下这三个事件mousedown,mouseup,mousemo...
完成一个界面，要有以下要素：(1)、局部变量、全局变量的定义和使用 (2)、for…in、switch…case、if语句 (3)、至少一个函数的定义和调用 (4)、DOM对象属性和方法（/表示至少选做其中一个）: 获得元素getElementById( )/ getElementByClassName( ) 对子节点的操作 appendChild(node)/removeChild(node)/replaceChild() 创建属性/元素/文本节点 createAttribute()/createElement()/createTextNode() 获得/设置属性getAttribute()/setAttribute() 属性innerHTML的使用 (5)、BOM对象属性和方法（/表示至少选做其中一个） 警告/确认/提示alert( )/confim( )/prompt( ) 定时器的使用setInterval( )/setTimeout( ) (6)、HTML5的全局方法 表单onchange/oninput onselect/onfocus/onblur 键盘onkeydown/onkeypress/onkeyup 鼠标onclick /ondblclick onmousedown/onmousemove/onmouseout /onmouseover/onmouseup 鼠标/键盘事件对象 client/client、screen/screenY、Location、 charCode/keyCode/which
06-02
好的，你的问题是如何完成一个界面，我会根据你提供的要素逐一回答。 1. 局部变量、全局变量的定义和使用： 在 JavaScript 中，可以使用 var、let 或 const 关键字来定义变量。使用 var 关键字定义的变量是全局的或函数作用域的，而使用 let 或 const 关键字定义的变量是块级作用域的。例如： ```javascript var globalVar = 'I am a global variable'; function foo() { var localVar = 'I am a local variable'; console.log(localVar); } foo(); console.log(globalVar); ``` 2. for…in、switch…case、if 语句： for…in 语句可以用来遍历对象的属性，switch…case 语句可以用来执行不同的代码块，if 语句可以用来根据条件执行不同的代码块。例如： ```javascript var obj = {a: 1, b: 2, c: 3}; for (var prop in obj) { console.log(prop + ': ' + obj[prop]); } var x = 2; switch (x) { case 1: console.log('x is 1'); break; case 2: console.log('x is 2'); break; default: console.log('x is neither 1 nor 2'); } var y = 3; if (y > 2) { console.log('y is greater than 2'); } else { console.log('y is less than or equal to 2'); } ``` 3. 至少一个函数的定义和调用： 在 JavaScript 中，可以使用 function 关键字来定义函数。函数可以接受参数，也可以返回值。例如： ```javascript function add(a, b) { return a + b; } console.log(add(1, 2)); ``` 4. DOM 对象属性和方法： DOM 是 Document Object Model 的缩写，它提供了一种访问 HTML 和 XML 文档的方式。可以使用 DOM 对象的属性和方法来操作 HTML 文档中的元素。例如： ```javascript // 获得元素 var elementById = document.getElementById('myId'); var elementByClassName = document.getElementsByClassName('myClass')[0]; // 对子节点的操作 var newNode = document.createElement('li'); var textNode = document.createTextNode('This is a new node'); newNode.appendChild(textNode); elementById.appendChild(newNode); elementById.removeChild(newNode); // 创建属性/元素/文本节点 var newAttr = document.createAttribute('id'); newAttr.value = 'newId'; elementById.setAttributeNode(newAttr); var newElement = document.createElement('div'); elementById.appendChild(newElement); var newText = document.createTextNode('This is a new text node'); elementById.appendChild(newText); // 获得/设置属性 var attrValue = elementById.getAttribute('id'); elementById.setAttribute('class', 'newClass'); elementById.innerHTML = '<h1>Hello world!</h1>'; ``` 5. BOM 对象属性和方法： BOM 是 Browser Object Model 的缩写，它提供了一种访问浏览器窗口和文档的方式。可以使用 BOM 对象的属性和方法来弹出警告框、确认框和提示框，也可以使用定时器来执行一些操作。例如： ```javascript // 警告/确认/提示框 alert('This is an alert message'); var result = confirm('Are you sure?'); var name = prompt('What is your name?'); // 定时器 var intervalId = setInterval(function() { console.log('This message will be printed every 5 seconds'); }, 5000); setTimeout(function() { clearInterval(intervalId); }, 30000); ``` 6. HTML5 的全局方法： HTML5 提供了一些全局方法，可以用来处理表单事件、键盘事件和鼠标事件。例如： ```javascript // 表单事件 var formElement = document.getElementById('myForm'); formElement.onchange = function() { console.log('The form has been changed'); }; formElement.oninput = function() { console.log('The form input has been changed'); }; // 键盘事件 document.onkeydown = function(event) { console.log('The key code is ' + event.keyCode); }; document.onkeypress = function(event) { console.log('The char code is ' + event.charCode); }; document.onkeyup = function(event) { console.log('The key which is released is ' + event.which); }; // 鼠标事件 var element = document.getElementById('myElement'); element.onclick = function() { console.log('The element has been clicked'); }; element.ondblclick = function() { console.log('The element has been double clicked'); }; element.onmousedown = function() { console.log('The mouse button has been pressed down'); }; element.onmousemove = function() { console.log('The mouse has been moved over the element'); }; element.onmouseout = function() { console.log('The mouse has left the element'); }; element.onmouseover = function() { console.log('The mouse has entered the element'); }; element.onmouseup = function() { console.log('The mouse button has been released'); }; ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值