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

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

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

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

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的补充知识点!!(重要,面试中也许会问到噢!!)


面试题:

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

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

这两个问题是什么意思呢?

我们平时在电脑中拖拽一张图片到浏览器中实现的下载操作!!!按照H5之前的标准,要实现直接拖拽一张图片到浏览器中显示是无法完成!!但是自从H5新特性出来之后增加了拖拽API的特性,完美的实现了这一功能!!!

应用场合:

在某网站上,上传图片当做是头像

上传相片…

HTML5新增的文件操作对象:

File: 代表一个文件对象

FileList: 代表一个文件列表对象,类数组

FileReader:用于从文件中读取数据

FileWriter:用于向文件中写出数据

相关函数:

div.ondrop = function(e){

var f = e.dataTransfer.files[0]; //找到拖放的文件

var fr = new FileReader(); //创建文件读取器

fr.readAsURLData(f); //读取文件内容

fr.onload = function(){ //读取完成

img.src = fr.result; //使用读取到的数据

}

}

代码如下:

拖放API的扩展知识

请拖动您的照片到下方方框区域

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

如何修改电脑mac地址?

2025-03-03 13:03:33

C 数组:深入解析与应用

2025-03-03 13:03:28

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