JS拖拽专题(一)——如果读完这篇文章你还不懂拖拽原理算我输
bigegpt 2024-10-12 06:29 3 浏览
欢迎来到我的JS拖拽专题系列文章,更多精彩内容持续更新中,欢迎关注 :)
什么是拖拽?
首先,拖拽并不是JS中的一个技术名词,而是……
在传统的web页面上,按下某一个dom元素,然后移动鼠标或者手指,这个dom元素就可以跟着走的行为,我把它称之为拖拽。
举例
核心代码:
就这么几行代码,下面我们来分析一下拖拽的基本原理。
JS中的事件
这应该算是JS基础的内容了,这里面主要涉及到了鼠标的按下(mousedown),移动(mousemove)和抬起(mouseup),每一个事件有一个事件对象,这个事件对象就是事件对应的处理函数的参数。
比如:box.onmousedown = e =>{}
这里面的e 就是我说所的事件对象,那么这个事件对象里面有什么呢?我们把它打印出来看一下就知道了。
可以清楚的看到,事件对象 e 里面携带了鼠标的位置信息。pageX和pageY,这两个属性都是只读的,不能修改。
值得注意的是:如果是在移动端托拽,那么对应的三个事件是touchstart ,touchmove,touchend,它们三个获取手指的位置的时候和PC端的有些许的差异。因为移动端会涉及到多指操作,所以我们
var pageX = e.changedTouches[0].pageX;这样去获取,这里只拿PC端做示例,移动端原理一样,在这就不再展开了。
我们获取到了鼠标的位置了,接下来我们回过头再来看下拖拽的现象,找出其中的关系、
这很简单:就是小方块是跟着鼠标走,也就是说在mousemove事件里面小方块的left,top永远和鼠标的位置的差值是相等的。即:鼠标位置(mouseX) = box.offsetLeft + ? , 鼠标位置(mouseY) = box.offsetTop +?;
现在我们已知:鼠标的位置,小方块的距离左侧和上面的距离, 现在我们要求两个?的值,这两个?其实就是鼠标和小方块offsetLeft 和offsetTop的差值、即:
var disX = e.pageX - box.offsetLeft; var disY = e.pageY - box.offsetTop;
而这个差值(disX,disY)是在小方块被鼠标按下的时候计算得出来的,所以这个两个差值就应该在mousedown事件里面。
紧接着因为在document的mousemove事件里面,鼠标位置在不断发生变化。我们已经在mousedown事件中求出了鼠标按下时与小方块之间的位置差值(disX,disY),所以我们可以在mousemove事件里面计算出小方块的位置。即:
box.style.left = e.pageX - disX + 'px'; box.style.top = e.pageY - disY + 'px';
最后,当我们的鼠标抬起的时候,我们需要移除当前的拖拽操作,所以我们在document的mouseup事件里面,要手动注销mousemove事件。
document.onmouseup = null; document.onmousemove = null;
注意,这里面不能将mousedown事件给注销了,否则第二次将不能再拖拽小方块了。
总结
- JS的事件对象中的属性e.pageX和e.pageY的基本用法
- 小方块距离左侧和上面的距离的获取(box.offsetLeft,box.offsetTop)
- 拖拽的基本原理是,在鼠标按下小方块的时候计算出鼠标和位置和当前小方块的位置的差值。因为这个差值在鼠标move的时候,是一定的,所以我们在鼠标move的时候可以根据鼠标位置和差值(disX,disY)来计算出小方块的实际位置。
这里是【畅哥聊技术】JS拖拽专题系列技术文章,更多精彩内容持续更新中。。。
未完待续。。。
相关推荐
- 恢复软件6款汇总推荐,帮你减轻数据恢复压力!
-
在当今数字化生活中,数据丢失的风险如影随形。无论是误删文件、硬盘故障,还是遭遇病毒攻击,丢失的数据都可能给我们带来不小的麻烦。此时,一款优秀的数据恢复软件就成为了挽救数据的关键。今天,为大家汇总推荐...
- 中兴星星一号刷回官方原版recovery的教程
-
【搞科技教程】中兴星星一号的官方recovery也来说一下了,因为之前给大家分享过了第三方的recovery了,之前给大家分享的第三方recovery也是采用一键刷入的方式,如果细心的朋友会发现,之前...
- 新玩机工具箱,Uotan柚坛工具箱软件体验
-
以前的手机系统功能比较单调,各厂商的重视程度不一样,所以喜欢玩机的朋友会解锁手机系统的读写权限,来进行刷机或者ROOT之类的操作,让使用体验更好。随着现在的手机系统越来越保守,以及自身功能的增强,...
- 三星g906k刷recovery教程_三星g906k中文recovery下载
-
【搞科技教程】看到有一些机友在找三星g906k的第三方recovery,下面就来说一下详细的recovery的刷入方法了,因为手机只有有了第三方的recovery之后才可以刷第三方的root包和系统包...
- 中兴星星2号刷recovery教程_星星二号中文recovery下载
-
【搞科技教程】咱们的中兴星星2手机也就是中兴星星二号手机的第三方recovery已经出来了,并且是中文版的,有了这个recovery之后,咱们的手机就可以轻松的刷第三方的系统包了,如果没有第三方的re...
- 数据恢复软件有哪些值得推荐?这 6 款亲测好用的工具汇总请收好!
-
在数字生活中,数据丢失的阴霾常常突如其来。无论是误删工作文档、格式化重要磁盘,还是遭遇系统崩溃,都可能让我们陷入焦虑。关键时刻,一款得力的数据恢复软件便是那根“救命稻草”。今天,为大家精心汇总6...
- 中兴u956刷入recovery的教程(中兴e5900刷机)
-
【搞科技教程】这次主要来给大家说说中兴u956手机如何刷入第三方的recovery,因为第三方的recovery工具是咱们刷第三方rom包的基础,可是很我欠却不会刷,所以太这里来给大家整理了一下详细的...
- 联想A850+刷recovery教程 联想A850+第三方recovery下载
-
【搞科技教程】联想A850+的第三方recovery出来了,这个第三方的recovery是非常的重要的,比如咱们的手机要刷第三方的系统包的时候,都是需要用到这个第三方的recovery的,在网上也是有...
- 工具侠重大更新 智能机上刷机一条龙完成
-
工具侠是针对玩机的机油开发的一款工具,不管是发烧级别的粉丝,还是普通小白用户,都可以在工具侠上找到你喜欢的工具应用。这不,最新的工具侠2.0.16版本,更新了专门为小白准备的刷机助手工具,以及MTK超...
- shift+delete删除的文件找回6种硬盘数据恢复工具
-
硬盘作为电脑的重要存储设备,如同一个巨大的数字仓库,承载着我们日常工作、学习和生活中的各种文件,从珍贵的照片、重要的工作文档到喜爱的视频、音乐等,都依赖硬盘来安全存放。但有时,我们可能会不小心用sh...
- 使用vscode+Deepseek 实现AI编程 基于Cline和continue
-
尊敬的诸位!我是一名专注于嵌入式开发的物联网工程师。关注我,持续分享最新物联网与AI资讯和开发实战。期望与您携手探寻物联网与AI的无尽可能。这两天deepseek3.0上线,据说编程能力比肩Cl...
- 详解如何使用VSCode搭建TypeScript环境(适合小白)
-
搭建Javascript环境因为TypeScript不能直接在浏览器上运行。它需要编译器来编译并生成JavaScript文件。所以需要首先安装好javascript环境,可以参考文章:https://...
- 使用VSCode来书写你的Jupyter Notebooks
-
现在你可以在VScode里面来书写你的notebook了,使用起来十分的方便。下面来给大家演示一下环境的搭建。首先需要安装一个jupyter的包,使用下面的命令安装:pip3install-ih...
- 使用VSCode模板提高Vue开发效率(vscode开发vue插件)
-
安装VSCode安装Vetur和VueHelper插件,安装完成后需要重启VScode。在扩展插件搜索框中找到如下Vetur和VueHelper两个插件,注意看图标。添加Vue模板打...
- 干货!VsCode接入DeepSeek实现AI编程的5种主流插件详解
-
AI大模型对编程的影响非常之大,可以说首当其冲,Cursor等对话式编程工具渐渐渗透到开发者的工作中,作为AI编程的明星产品,Cursor虽然好用,但是贵啊,所以咱们得找平替,最好免费那种。俗话说,不...
- 一周热门
- 最近发表
- 标签列表
-
- mybatiscollection (79)
- mqtt服务器 (88)
- keyerror (78)
- c#map (65)
- xftp6 (83)
- bt搜索 (75)
- c#var (76)
- xcode-select (66)
- mysql授权 (74)
- 下载测试 (70)
- linuxlink (65)
- pythonwget (67)
- androidinclude (65)
- libcrypto.so (74)
- linux安装minio (74)
- ubuntuunzip (67)
- vscode使用技巧 (83)
- logstashinput (65)
- vue阻止冒泡 (67)
- jquery跨域 (68)
- php写入文件 (73)
- kafkatools (66)
- mysql导出数据库 (66)
- jquery鼠标移入移出 (71)
- 取小数点后两位的函数 (73)