JavaScript经典案例之鼠标拖拽

最新推荐文章于 2024-02-17 09:28:20 发布
最新推荐文章于 2024-02-17 09:28:20 发布
阅读量599 收藏 5
点赞数 6
分类专栏： Javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53278262/article/details/112170030
版权
本文介绍了使用JavaScript实现鼠标拖拽div元素的原理和步骤，包括mousedown、mousemove和mouseup事件的处理，以及如何处理拖动过程中的边界限制问题。
摘要由CSDN通过智能技术生成

实现原理:鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置，实现的前提是div要有一个定位效果，不然的话是移动不了它的。 

首先先分析一下需求,这个需求就是点击时鼠标按下你才能移动并改变div在页面中的位置,鼠标松开你就不能在移动了。所以这里鼠标的状态有三个，分别是点击时鼠标按下（mousedown事件）、移动时鼠标移动（mousemove事件）、松开时鼠标抬起（mouseup事件)

1. 鼠标拖拽时,记录鼠标按下的位置,具体分析如下图

 其中e.pageX,e.pageY分别为鼠标相对于文档的实际位置,box.offsetLeft获取div距离文档左边的距离,box.offsetTop获取div距离文档上边的距离,因为在移动的过程中,鼠标相对于盒子box的位置不变,所以通过e.pageX-box.offsetLeft来获取鼠标距离box左边偏移的距离,e.pageY-box.offsetTop来获取鼠标距离box上边偏移的距离,从而算出鼠标点击的位置并记录下来.

Tips:

鼠标移动时 
为了防止鼠标移动过快事件无法正确处理所以事件绑定到document上

2. 最大边界问题

最低0.47元/天 解锁文章
努力的黑皮
关注
专栏目录
javaScript常用案例
张张张张张高高的博客
09-06 9259
前端页面开发之javaScript常用案例
使用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学习之实现拖拽效果
qq_32021429的博客
11-06 266
JS原生实现拖拽效果 HTML代码 <!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> html,
JavaScript鼠标拖拽事件小例子详解
weixin_34129696的博客
07-18 294
有时候我们在桌面上新建一个文件夹，大家都知道新建文件夹的位置是系统根据桌面上最后一个默认排序的，想把这个文件夹放在自己容易辨识的地方，可能是右下角，可能是右上角，那这个拖拽是怎么实现的呢？ 一、我们先写出来一个盒子： <div class='box'></div> 复制代码二、写盒子的样式，鼠标对于盒子来说是相对定位，所以一定要写定位 <style> ....
案例：鼠标拖拽
kino2046的博客
04-30 322
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahtt...
13.鼠标拖拽：案例:鼠标拖拽小方块，小方格跟着移动（桌面图标拖动）
lazylYYY的博客
08-14 1490
一：案例鼠标拖拽小方块，小方格跟着移动（桌面图标拖动） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc
汉诺塔动画演示(html+js+css 鼠标拖拽以及点击按钮练习功能+手机端适配)
06-06
在这个"汉诺塔动画演示(html+js+css 鼠标拖拽以及点击按钮练习功能+手机端适配)"项目中，开发者使用了Web技术栈，包括HTML5、JavaScript、CSS和jQuery，来创建一个交互式的汉诺塔游戏。HTML5是网页的基础结构语言，...
数据可视化之美：经典案例与实践解析
GitChat
03-19 9464
随着DT时代的到来，传统的统计图表很难对复杂数据进行直观地展示。这几年数据可视化作为一个新研究领域也变得越来越火。成功的可视化，如果做得漂亮，虽表面简单却富含深意，可以让观测者一眼就能洞察事实并产生新的理解。可视化(visualization)和可视效果(visual)两个词是等价的，表示所有结构化的信息表现方式，包括图形、图表、示意图、地图、故事情节图以及不是很正式的结构化插图。 基本的可视化展...
JavaScript精彩案例
07-24
本资源“JavaScript精彩案例”集合了一系列经典实例，旨在帮助开发者深入理解和掌握JavaScript的基本语法、事件处理、动画制作等技能。 1. **鼠标监听**：JavaScript提供了一系列API来处理用户的鼠标操作。例如，`...
js 前端鼠标拖动事件实例
12-11
js 前端鼠标拖动事件实例
web前端实例：JS鼠标拖拽效果
最新发布
weixin_74009702的博客
02-17 1672
JavaScript 鼠标拖拽效果是一种常见的交互技术，通过监听鼠标事件和操作元素的位置来实现用户拖拽元素的功能。 该技术的实现原理包括鼠标事件的监听、确定拖拽对象、跟随鼠标移动以及释放拖拽对象。具体实现中，需要考虑事件监听、元素定位、位置计算等技术要点，并注意边界控制、性能优化和兼容性问题。 触摸事件与鼠标事件相比，具有不同的触发方式、事件对象和适用性，更适用于移动设备和平板电脑等触摸屏设备。
js实现鼠标拖拽效果
NKWZZX的博客
07-08 710
鼠标拖拽效果 使用js实现鼠标点击div实现拖拽效果，物体跟随鼠标进行移动 功能效果要点： 鼠标在物体内按下不松之后，鼠标移动，物体跟随鼠标位置发生移动，实现鼠标拖拽效果，下方代码实现的是拖拽图片进行移动的效果； **如果是图片，需要清除一下图片标签在浏览器中的默认事件** ```javascript var o = document.getElementById('box');//移动的物体 var vH=document.documentElement.clientHeight;/
【javaScript案例】之鼠标拖拽效果
qwerty053的博客
10-24 634
这次的效果图如下： 我认为这个实验的难点是保持盒子和鼠标的相对位置不变，通过鼠标按下和移动来实现拖拽的效果 如何实现拖拽的效果呢？ 我们需要用到三个函数：onmousedown、onmousemove、onmouseup，分别表示鼠标按下、鼠标移动、鼠标抬起 在鼠标按下的回调函数中，我们需要通过clientX和clientY获取鼠标的初始位置，通过offsetLeft和offsetTop获取盒子的初始位置，然后计算鼠标初始位置和盒子初始位置的差值； 在鼠标移动的回调函数中，我们需要根据鼠标的位置和之前计算
9.6 拖拽功能的实现
web
09-06 153
功能实现：主要通过三个事件来实现拖拽功能的 onmousesown 鼠标按下，onmousemove鼠标移动，onmouseup 鼠标弹起。 **注意点：**三个事件添加的对象是不一样的，onmousesown是添加在要拖拽的元素上，另外两个事件是添加在document上，还有就是对距离的处理 e.page //相对于浏览器的坐标 核心代码： function drag(root) { //root：需要拖拽的元素 root.onmousedown = function (e) { va
JavaScript-事件之onmousemove
tian_tian_gong的博客
02-18 4911
onmousemove 监听鼠标移动事件。 注意，ie8及ie8以下监听不到event， 所以要用event=window.event;做一下兼容处理。 clientX/clientY获取当前鼠标在指定标签内的可见横纵坐标位置。 标签.onmousemove=function(event){ //兼容处理 if(!event){ event=window.event; } // 或者 // ...
JavaScript之事件（重点）
程序猿小九九的博客
02-17 544
事件的冒泡、委派、绑定、传播、以及常用事件的归纳。
学习笔记（六）——JavaScript（三）
别呀的博客
05-24 5679
文章目录一、鼠标事件1.1、鼠标移动事件(onmousemove)1.2、鼠标按键按下与松开事件(onmousedown/onmouseup)1.3、鼠标滚轮事件(onmousewheel)1.4、鼠标触碰事件(onmouseover/onmouseout)二、键盘事件三、Bom 浏览器对象模型四、定时器 一、鼠标事件 鼠标事件种类： 事件名 描述 onclick 单击鼠标左键时触发 ondblclick 双击鼠标左键时触发 onmouseover 鼠标移动到元素上时触发 onm
JavaScript的拖拽事件。
weixin_43228946的博客
08-21 723
在浏览器可以随意的拖拽，我们来看下怎么实现？ 我们具体分析一下步骤： 第一步：鼠标选中需要拖拽的地方，鼠标按下。（需要使用事件onmousedown） 第二步：鼠标按下后，我们接着移动鼠标。（onmousemove） 第三步：鼠标松开，将拖拽的元素固定在那，也就是拖到就到哪。（onmouseup） 现在我们具体看下代码：
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值