5-15

HTML5 拖放API

1.被拖动元素draggable属性设置为true
2.绑定事件
dragstart: 被拖动元素
dataTransfer: 对象专门用来存放拖动时要携带的数据
dragend: 拖放的元素（拖放操作结束） 需设置不执行默认处理e.preventDefault()（拒绝被拖放）
drop: 拖放目标元素（其他元素被拖放到本元素中） 需从dataTransfer对象中取得数据 不执行默认处理和停止事件传播 e.preventDefault() e.stopPropagation()
3.要实现拖放过程，还需设定整个页面不执行默认处理，否则不能实现。因为页面是优先于其他元素接受拖放的，如果页面拒绝，那么页面上其他元素也都不能接受拖放。 document.ondragover && ondrop → e.preventDefault()

DataTransfer对象的属性和方法：

setData(MIME.TYPE,data): 设置数据
getData(MIME.TYPE): 从setData拿数据
clearData: 清除数据
MIME:  text/plain  文本文字
       text/html html文字
       text/xml xml文字
       text/url-list URL列表，每个URL为一行

WebStorage

HTML5中，可以在本地保存数据的Web Storage功能。
分为sessionStorage与localStorage.
属性：

localStorage.length  // 保存数据的条数
localStorage.key(index) //想要得到数据的索引

保存数据：

sessionStorage.setItem(key,value);  
localStorage.setItem(key,value);        

读取数据

var str = sessionStorage.getItem(key,value);    
var str = localStorage.getItem(key,value);  

清除storage

sessionStorage.clear();
localStorage.clear();