html5的新特性——拖放API
在HTML5之前只能使用鼠标事件模拟出“拖放”效果；HTML5专门为拖放提供了7个事件句柄。
被拖动的源对象可以触发的事件：
(1)ondragstart：源对象开始被拖动
(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)
(3)ondragend：源对象被拖动结束
拖动源对象可以进入到上方的目标对象可以触发的事件：
(1)ondragenter：目标对象被源对象拖动着进入
(2)ondragover：目标对象被源对象拖动着悬停在上方 注意：必须组织dragover事件的默认行为，才可能触发drop事件！ e.preventDefault();
(3)ondragleave：源对象拖动着离开了目标对象
(4)ondrop：源对象拖动着在目标对象上方释放/松手
范例一：被拖动的对象触发的三个事件（dragstart\drag\dragend）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/1.jpg" id="i1"/>
<script>
var i1=document.getElementById('i1');
i1.addEventListener('dragstart',function(){
console.log('你拖动了....');
});
i1.addEventListener('drag',function(){
console.log('你正在拖动....');
});
i1.addEventListener('dragend',function(){
console.log('你结束了拖动....');
});
</script>
</body>
</html>
范例二：拖动对象去指定目标对象（dragenter\dragover\drop\dragleave）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#d1{
width: 200px;
height: 200px;
border: 1px solid #555555;
margin:auto;
}
</style>
</head>
<body>
<img src="img/1.jpg" id="i1"/>
<div id="d1"></div>
<script>
var d1=document.getElementById('d1');
d1.addEventListener('dragenter',function(){
console.log('你将图片拖进目标对象....');
});
d1.addEventListener('dragover',function(e){
//在拖动对象悬停在目标对象时，我们阻止阻止浏览器的默认行为
//才能触发drop 释放事件
e.preventDefault();
console.log('你将图片悬停在目标对象上....');
});
d1.addEventListener('drop',function(){
console.log('你放下了图片....');
});
d1.addEventListener('dragleave',function(){
console.log('你拖出了图片....');
});
</script>
</body>
</html>
三、如何在拖动的源对象事件和目标对象事件间传递数据？
HTML5为所有的拖动相关事件提供了一个新的属性：e.dataTransfer 用于在源对象和目标对象的事件间传递数据。
源对象上的事件处理中保存数据：
e.dataTransfer.setData( k, v ); //k-v必须都是string
目标对象上的事件处理中读取数据：
var v = e.dataTransfer.getData( k );
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
text-align: center;
}
#d1{
width: 100px;
height: 100px;
border: 1px solid #555555;
margin:auto;
}
</style>
</head>
<body>
<div id="d1">拖进来就删除</div>
<br/><br/><br/><br/>
<img src="img/1.jpg" class="res"/>
<img src="img/2.jpg" class="res"/>
<img src="img/3.jpg" class="res"/>
<img src="img/4.jpg" class="res"/>
<script>
//获取所有的图片对象
var imglist=document.querySelectorAll('.res');
for(var key in imglist){
//为每个图片绑定 "开始拖动"动作的 监听
//注意这时的拖动事件有个对象 e.dataTransfer
imglist[key].ondragstart=function(e){
console.log(e.dataTransfer);
/**e.dataTransfer对象属性
*
*files：获取对应文件列表
*items：获取对应元素列表
* types：
*
* 方法：
* setData(type,data)
* 参数
* type-设置当前数据的类型（标识——唯一）
* data-向dataTransfer对象设置的数据内容
* 作用——向dataTransfer对象存储数据
*
* getData(type)
* 参数
* type-设置当前数据的类型（标识——唯一）
*作用-从dataTransfer对象获取指定数据
*
*clearData()
* 作用-清空dataTransfer对象中所有存储的内容
*
* */
}
}
</script>
</body>
</html>
e.dataTransfer控制台显示：三个属性 三个主要方法
e.dataTransfer.setData('',''); e.dataTransfer.getData('',''); 的拖动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
text-align: center;
}
#d1{
width: 100px;
height: 100px;
border: 1px solid #555555;
margin:auto;
}
</style>
</head>
<body>
<div id="d1"></div>
<br/><br/><br/><br/>
<img src="img/1.jpg" class="res"/>
<img src="img/2.jpg" class="res"/>
<img src="img/3.jpg" class="res"/>
<img src="img/4.jpg" class="res"/>
<script>
//获取所有的图片对象
var imglist=document.querySelectorAll('.res');
for(var key in imglist){
//为每个图片绑定 "开始拖动"动作的 监听
//注意这时的拖动事件有个对象 e.dataTransfer
imglist[key].ondragstart=function(e){
console.log(e.dataTransfer);
//向dataTransfer对象存储数据
e.dataTransfer.setData('image/png',this.src);
}
}
var d1=document.getElementById('d1');
//之前提过只有 dragover事件，里面设置了 e.preventDefault();才能触发drop事件
d1.ondragover=function(e){
e.preventDefault();
}
d1.ondrop=function(e){
var src=e.dataTransfer.getData('image/png');
console.log(src); //这里得到的是一个 http://localhost:63342/HTML_DAY05/img/1.jpg 字符串
var kw=src.match(/(img\/){1}\d{1}(.jpg)/g); //所以进行正则 得到 我们需要的字符串
console.log(kw);
/*
这里可以 用‘+’拼接 得到需要的字符串 后使用dom 查找到准确的图片对象 将其 拼接到 目标对象 ‘d1’下
kw="'"+kw+"'";
var img=document.querySelector("[src="+kw+"]");
*/
//这里 也可以用 `` 这个来书写 选择器 属于js特有的符号 但是引用变量时 要 ${}括起来
var img=document.querySelector(`[src="${kw}"]`);
this.appendChild(img); //如此 就可以出现真正拖动 效果 了。 }
</script>
</body>
</html>
效果图:
四.如何去实现拖拽文件进入一个网页。
提问：实现在网页中将客户端的图片移入网页中显示？
这里我们(不进行任何操作)直接拖入图片进入网页，会怎么显示呢？
解一：这里直接拖到网页的图片会在一个新打开的网页上显示，并不会出现在我们想要它出现的位置上。
我们知道ondragover的只有阻止默认浏览器行为e.preventDefault();才能触发ondrop事件。
所以我们想要从客户端上拖放图片到网页上我们指定的区域，也需要在网页上进行drop事件时取消浏览器的默认行为。
解二：如何让浏览器读取到我们的文件内容。
div.ondrop = function(e){
var f = e.dataTransfer.files[0]; //找到拖放的文件
var fr = new FileReader(); //创建文件读取器
fr.readAsURLData(f); //读取文件内容
fr.onload = function(){ //读取完成
img.src = fr.result; //使用读取到的数据
}
}
这里同样有个知识点：
HTML5新增的文件操作对象：
File： 代表一个文件对象
FileList： 代表一个文件列表对象，类数组
FileReader：用于从文件中读取数据
FileWriter：用于向文件中写出数据
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#container{
border:1px solid #aaa;
padding:10px;
margin:10px;
width: 500px;
height:500px;
}
</style>
</head>
<body>
<h3>拖放API的扩展知识——将本地文件拖到html页面上</h3>
<h3>请拖动您的照片到下方方框区域</h3>
<div id="container"></div>
<script>
document.ondragover=function(e){
e.preventDefault();
}
document.ondrop=function(e){
e.preventDefault();//在新窗口打开图片
}
//监听div.container的drop事件，设法读取到释放的图片 container.ondragover=function(e){
console.log(this);
e.preventDefault();
}
container.ondrop=function(e){
console.log('释放了.');
//当前的目标对象读取拖放源对象存储的数据
// console.log(e.dataTransfer); //显示有问题
// console.log(e.dataTransfer.files.length); //拖进来的图片数量 var f0= e.dataTransfer.files[0]; //文件对象
// console.log(f0);
var fr=new FileReader(); //创建文件读取器
// fr.readAsText(f0); //从文件中读取文本字符串
fr.readAsDataURL(f0); //从文件中读取url数据
fr.onload=function(){
console.log('读取文件完成');
console.log(fr.result);
var img=new Image();
img.src=fr.result;
container.appendChild(img);
}
}
</script>
</body>
</html>
html5的新特性——拖放API的更多相关文章
- 浅谈HTML5的新特性
2014年10月29日,W3C宣布,经过接近8年的艰苦努力,HTML5标准规范终于制定完成. HTML5将会取代1999年制定的HTML 4.01.XHTML 1.0标准,使网络标准达到符合当代的网络 ...
- Atitti html5 h5 新特性attilax总结
Atitti html5 h5 新特性attilax总结 Attilax觉得不错的新特性 3.语义Header和Footer (The Semantic Header and Footer) 8.占位 ...
- Atitit html5.1 新特性attilax总结
Atitit html5.1 新特性attilax总结 9. 嵌入 header 和 footer1 7. 校验表单1 6. 浏览器的上下文菜单2 1. 响应式图像2 Attilax觉得还不错的心特性 ...
- JDK1.8新特性——Stream API
JDK1.8新特性——Stream API 摘要:本文主要学习了JDK1.8的新特性中有关Stream API的使用. 部分内容来自以下博客: https://blog.csdn.net/icarus ...
- HTML5的新特性：范围样式，又叫做<style scoped>
Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做<style scoped> .开发者可以通过为根元素设定一个添加了scoped属性的style标签,来限制样式只作用于 ...
- 浅谈html5及其新特性
什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍 ...
- HTML5的新特性
HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article.footer. ...
- HTML5 的新特性以及新标签的浏览器兼容问题
新特性: HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加. 1) 拖拽释放(Drag and drop) API 2) 语义化更好的内容标签(heade ...
- 28个你必须知道的HTML5的新特性,技巧以及技术
崭新新的页面布局 传统的: HTML5: 1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用<f ...
随机推荐
- 【原】使用Xfermode正确的绘制出遮罩效果
以前写as3的时候,遮罩效果一个mask属性就搞定了,真是方便. 转到android上以后,发现要实现类似的效果,可以使用Xfermode,android一共提供了三种: AvoidXfermode; ...
- Quartz2D 编程指南（三）渐变、透明层 、数据管理
概览 图形上下文 路径 颜色与颜色空间 变换 图案 阴影 渐变 透明层 Quartz 2D 中的数据管理 位图与图像遮罩 CoreGraphics 绘制 Layer 渐变 简介 渐变是从一个颜色到另外 ...
- 第一篇：白话tornado源码之一个脚本引发的血案
本系列博文计划: 1.剖析基于Python的Web框架Tornado的源码 2.为Python开发一个完善的MVC框架 首先将带着大家一起来剖析基于python编写的Web框架 tornado ,本着 ...
- Java提高篇——设计模式
设计模式简介 设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用.设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案.这些解决方案是众多软 ...
- .NET 扩展方法(Extention Method)的要点
扩展方法Extention Method的主要介绍在:http://msdn.microsoft.com/zh-cn/library/bb383977(v=vs.100).aspx. 扩展方法的意义在 ...
- ADC 转换序列暂时难理解
通常情况下,core文件会包含了程序运行时的内存,寄存器状态,堆栈指针,内存管理信息还有各种函数调用堆栈信息等,我们可以理解为是程序工作当前状态存储生成第一个文件,程序出错的时候理论上都会产生一个co ...
- JSP以及JSP解析原理
什么是JSP? JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写htm ...
- 使用Maven构建Java Web项目时，关于jsp中引入js、css文件路径问题。
今天有点闲,自己动手搭建一个Java Web项目,遇到jsp中引入js.css文件时路径不正确的问题,于是在网上查阅了很多资料,最终都无法解决问题,于是,上stackoverflow找到了解决方法,这 ...
- PL/SQL Developer安装详解（32位客户端免安装版）
PL/SQL Developer是一个集成开发环境,专门开发面向Oracle数据库的应用.PL/SQL也是一种程序语言,叫做过程化SQL语言(Procedural Language/SQL).PL/S ...
- 邓博泽 java最全的DateUtil工具类
package com.kld.yijie.web.util; import org.slf4j.Logger;import org.slf4j.LoggerFactory; import java. ...