一、元素拖放事件
1、概念
在 HTML5 中增加了多个针对元素拖放的事件,使实现元素拖放变得更简单。拖放事件仅仅能实现拖放的动作,要想真正实现拖放后进行数据交互,还需要结合dataTransfer对象,才能真正实现拖放效果。
注意:要实现元素拖放,首先要在目标元素上 设置draggable = “true” ,否则无法实现拖放。
2、事件
在拖动目标上触发事件 (源元素):
- ondragstart - 用户开始拖动元素时触发
- ondrag - 元素正在拖动时触发(鼠标可能在移动也可能未移动)
- ondragend - 用户完成元素拖动后触发
释放目标时触发的事件:
- ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
- ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
- ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
- ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
二、dataTransfer 对象
1、概念
dataTransfer 对象是事件对象的一个属性,用来暂时存放被拖放的数据,只能在拖放事件的处理程序中访问该对象。不过目前不同的浏览器对该对象的支持情况不同,所以下面以谷歌浏览器为标准说明。
如何在拖动的源对象事件和目标对象事件间传递数据
1. HTML5为所有的拖动相关事件提供了一个新的属性dataTransfer :
e.dataTransfer { } //数据传递对象
功能:用于在源对象和目标对象的事件间传递数据2. 源对象上的事件处理中保存数据:
e.dataTransfer.setData( k, v ); //k-v必须都是string类型3. 目标对象上的事件处理中读取数据:
var v = e.dataTransfer.getData( k );
2、方法
① setData(format,data)
该方法用来将指定格式的数据存储在 dataTransfer 对象中,参数 format 定义数据类型,data 定义要存储的数据。
// 将被拖动对象的id属性 以 text 类型存储到 dataTransfer 对象中 event.dataTransfer.setData("text",event.target.id);
② getData(format)
该方法用来从 dataTransfer 对象中获取指定格式的数据。参数 format 定义要读取数据的类型,如果指定的数据类型不存在,则返回空字符串或报错。
// 从 dataTransfer 对象中读取出 text 类型的数据,赋值给变量 var data = event.dataTransfer.getData("text");
三、拖动案例
案例1展示:
代码如下:
<p>请将下面图片拖入到框中</p>
<!--
ondragstart:该事件表示拖放开始
ondragover:该事件表示拖放结束
ondrop:该事件表示拖放过程
-->
<div id="result" ondragover="allowDrag(event)" ondrop="drop(event)"></div>
<!-- draggable:值为true时表示元素可以拖动,默认为false,表示不能拖动 -->
<img src="./img/flower.jpg" id="img1" alt="" draggable="true" ondragstart="drag(event)">
<script type="text/javascript">
// 用于拖放的函数 拖动已开始
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
// 拖动过程
function drop(ev){
// 允许其他元素拖放到此处
ev.preventDefault();
// 获取要拖放元素的id
var id = ev.dataTransfer.getData("Text");
// 将一个标签添加到另外一个标签中,可以使用appendChild();
ev.target.appendChild(document.getElementById(id));
}
// 拖动结束
function allowDrag(ev){
// 允许其他元素拖放到此处
ev.preventDefault();
}
</script>
案例2展示:
代码如下:
<p>请将下面图片拖入到框中来回拖放</p>
<div id="result" ondragover="allowDrag(event)" ondrop="drop(event)">
<img src="./img/flower.jpg" id="img1" alt="" draggable="true" ondragstart="drag(event)">
</div>
<div id="result" ondragover="allowDrag(event)" ondrop="drop(event)"></div>
<!-- draggable:值为true时表示元素可以拖动,默认为false,表示不能拖动 -->
<script type="text/javascript">
// 用于拖放的函数 拖动已开始
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
// 拖动过程
function drop(ev){
// 允许其他元素拖放到此处
ev.preventDefault();
// 获取要拖放元素的id
var id = ev.dataTransfer.getData("Text");
// 将一个标签添加到另外一个标签中,可以使用appendChild();
ev.target.appendChild(document.getElementById(id));
}
// 拖动结束
function allowDrag(ev){
// 允许其他元素拖放到此处
ev.preventDefault();
}
</script>
四、了解Web Storage简介
Web Storage API两个关键的对象:window.localStorage对象(本地存储)和window. sessionStorage对象(区域存储)
- localStorage -用于长久保存整个网站的数据,保存的数据潦有过期时间,直到手动去除。
- sessionStorage -用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
Web Storage的特点:
- 设置数据和读取数据比较方便
- 容量较大,sessionStorage约5M,localStorage约20M
- 只能存储字符串,如果要存储SON对象,可以使用window.JSON的stringify()方法和parse()方法进行序列化和反序列化。
五、了解localStorage使用
方法&属性 | 描述 |
---|---|
setltem(key,value) | 该方法接收一个键名和值作为参数,将会把键值对添加到存储中,如果键名存在,则更新其对应的值 |
getltem(key) | 该方法接收一个键名作为参数,返回键名对应的值 |
romoveltem(key) | 该方法接收一个键名作为参数,并把该键名从存储中删除 |
length | 类似数组的length属性,用于访问Storage对象中item的数量。 |
key(n) | 用于访问第n个key的名称 |
clear() | 清除当前域下的所有localSotrage内容 |