drag，drop，datatransfer小结

虽然可以用mousedown、mousemove、mouseup实现拖放功能，但它们只支持浏览器内拖放，而html5 的API中，已经可以支持浏览器与其他应用程序之间数据元素的相互拖动。

1、属性 
draggable：想要对某对象元素进行拖动操作，就可以把它的draggable属性值设置为true（draggable=“true”）。
此外，img元素和a元素（必须指定href）默认允许拖放。

2、

   事 件                           产生事件的元素                               描述                          

dragstart                   被拖放的元素                                开始拖放操作

drag                          被拖放的元素                                拖放过程中

dragenter                  拖放过程中鼠标经过的元素             被拖放的元素开始进入本元素的范围内

dragover                   拖放过程中鼠标经过的元素              被拖放的元素在本元素范围内移动

dragleave                  拖放过程中鼠标经过的元素              被拖放的元素离开本元素的范围

drop                          拖放的目标元素                              有其他元素拖放到本元素中

dragend                    拖放的对象元素                              拖放操作结束

3、DataTransfer 接口

html5支持拖曳数据存储，使用datatransfer接口，作用于元素的拖曳基础上。

var dt = ev.dataTransfer;

属性：

datatransfer.effectAllowed = value     

//一般在ondragstart事件中设定，返回允许执行拖曳操作效果，可以设置修改：none，                                                                 copy，copyLink， copyMove,link,linkMove,move，all，uninitialized

datatransfer.types                              

 //返回在dragstart事件出发时为元素存储数据的格式，如果是外部文件的拖曳，则返                                                                     回“filse”

datatransfer.clearData([format])           

//删除指定格式的数据，如果未指定，则删除当前元素所有数据

datatransfer.setData(format,data)        

 //为元素添加指定数据，现支持拖动处理的MIME的类型有：text/plain，text/html，                                                                   text/xml，text/uri-list

datatransfer.getData(format)                

//返回指定数据，如果数据不存在，则返回空字符串

datatransfer.files                                  

 //如果是拖曳文件，返回文件列表FileList

datatransfer.setDragImage(element, x, y)  

 //制定拖曳元素时跟随鼠标移动的图片，想，y分别为相对鼠标的坐标

datatransfer.addElement(element)          

 //添加一起跟随拖曳的元素

demo：

http://www.zhangxinxu.com/study/201102/html5-drag-and-drop.html