拖拽事件

设置拖拽的操作对象

被拖拽对象和拖拽释放区域

被拖拽对象：ondragstart，ondrag，ondragend

拖拽释放区：ondragenter，ondragover(要触发drop事件，要在over里阻止浏览器的默认事件)，ondragleave，ondrop（在释放时有浏览器的默认事件，比如释放图片，浏览器默认会在新窗口打开图片；要在drop事件里也阻止默认事件，ev.preventDefault（）；）

在火狐下，由于除了图片之外的所有类型都默认是不能拖拽的，所以要在star事件中调用ev.dataTransfer对象的setData（key,value）方法，key和value必须是字符串。getData(key)获取对应的value。比如在释放的时候利用get的到的东西做一些事件的处理逻辑

ev.dataTransfer对象的一些属性

(1)ev.dataTransfer.effectAlowed='copy'.设置enter时的鼠标样式。不同值对应不同的样式——start

(2)ev.dataTransfer.setDragImage(拖拽时显示的对象，对象对于鼠标的X坐标，对象对于鼠标的Y坐标)——start

ev.dataTransfer.setDragImage（oDiv，0,0）；拖拽时展示的是一个div，鼠标在div的左上角

(3)ev.dataTransfer.files拖拽进来的文件对象（列表），length属性，知道拖拽了几个文件——drop

var fs=ev.dataTransfer.files.   fs[0]，值拖拽一个时，也要用[0]去获取。

fs[0].type返回这个文件的类型

 

文件对象

var fd=new FileReader();

fd.readAsDataUrl(fs[0])；//将文件读取为dataurl

fd.onload=function(){

this.result//返回读取的信息，加以处理进行业务逻辑

};//当文件读取成功时