首页 前端知识 HTML5--拖拽API(含超经典例子)

HTML5--拖拽API(含超经典例子)

2024-05-12 17:05:58 前端知识 前端哥 480 61 我要收藏

三、什么是源对象和目标对象?


在这里插入图片描述

源对象:指的是我们鼠标点击的一个事物,这里可以是一张图片,一个DIV,一段文本等等。

目标对象:指的是我们拖动源对象后移动到一块区域,源对象可以进入这个区域,可以在这个区域上方悬停(未松手),可以释松手释放将源对象放置此处(已松手),也可以悬停后离开该区域。

四、拖拽API的相关函数


解释了什么是源对象和目标对象后,回归前端中的拖拽API,由上面的操作我们可以得出几个函数

被拖动的源对象可以触发的事件:

(1)ondragstart:源对象开始被拖动

(2)ondrag:源对象被拖动过程中(鼠标可能在移动也可能未移动)

(3)ondragend:源对象被拖动结束

拖动源对象可以进入到上方的目标对象可以触发的事件:

(1)ondragenter:目标对象被源对象拖动着进入

(2)ondragover:目标对象被源对象拖动着悬停在上方

(3)ondragleave:源对象拖动着离开了目标对象

(4)ondrop:源对象拖动着在目标对象上方释放/松手

拖拽API总共就是7个函数!!

五、如何在拖动的源对象事件和目标对象事件间传递数据


HTML5为所有的拖动相关事件提供了一个新的属性:

e.dataTransfer { } //数据传递对象

功能:用于在源对象和目标对象的事件间传递数据

源对象上的事件处理中保存数据:

e.dataTransfer.setData( k, v ); //k-v必须都是string类型

目标对象上的事件处理中读取数据:

var v = e.dataTransfer.getData( k );

示例一:实现一个可以随着鼠标拖动而移动的小飞机

提示:飞机需要绝对定位!ondrag事件中获取鼠标的坐标值!!!

在这里插入图片描述

代码如下:

随着鼠标拖动而移动的小飞机

效果如下:

在这里插入图片描述

示例二:

模拟电脑中 ”垃圾桶“的效果, 总共显示三个小飞机,拖动着某个小飞机到垃圾桶上方后,小飞机从DOM树上删除

提示:删除需要从DOM子节点中删除元素,需要阻止ondragover的默认行为!!利用源对象和目标对象的数据传递记录小飞机的ID值!!!

重要信息:

ondragover有一个默认行为!!!那就是当ondragover触发时,ondrop会失效!!!!这个可能是浏览器的版本问题,需要以后浏览器不断更新可能才会解决!!

如何阻止?

οndragοver= function(e){ //源对象在悬停在目标对象上时

e.preventDefault(); //阻止默认行为,使得drop可以触发

}

οndrοp= function(e){ //源对象松手释放在了目标对象中

}

在这里插入图片描述

代码如下:

拖动飞机到垃圾桶后从DOM树中删除子元素


效果如下:

在这里插入图片描述

拖拽小飞机到垃圾桶删除后:

如图,原本三架小飞机,现在变成了两架!!!

在这里插入图片描述

六、拖拽API的补充知识点!!(重要,面试中也许会问到噢!!)


面试题:

如何在网页中显示客户端(电脑)的一张图片?

如何拖动客户端的网页显示在服务器端下载的页面中?

自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。

深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。

img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!

由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!

如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)

最后

前15.PNG

前16.PNG

由于文档内容过多,为了避免影响到大家的阅读体验,在此只以截图展示部分内容,详细完整版的JavaScript面试题文档,或更多前端资料可以点此处获取。

有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!**

[外链图片转存中…(img-BI1rtkfD-1712450429824)]

由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!

如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)

最后

[外链图片转存中…(img-OIDlr1yh-1712450429825)]

[外链图片转存中…(img-ThaAJHiT-1712450429825)]

由于文档内容过多,为了避免影响到大家的阅读体验,在此只以截图展示部分内容,详细完整版的JavaScript面试题文档,或更多前端资料可以点此处获取。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8325.html
标签
评论
发布的文章

Unity数据持久化之Json

2024-08-10 22:08:00

simdjson 高性能JSON解析C 库

2024-08-10 22:08:00

npm常用命令详解(一)

2024-08-10 22:08:34

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!