html5中有一个特性就是以前一直常说的拖放上传，其实这个功能要实现的话真的不太难，但我对于DOM的操作并不是特别了解，因此我找了一些资料做备份
1、xheditor中的代码
2、html5的一些教程
xheditor中的代码很少，只有区区几行：
- jBody.bind('dragenter dragover',function(ev){var types;if((types=ev.originalEvent.dataTransfer.types)&&$.inArray('Files', types)!==-1)return false;}).bind('drop',function(ev){
- var dataTransfer=ev.originalEvent.dataTransfer,fileList;
- if(dataTransfer&&(fileList=dataTransfer.files)&&fileList.length>0){
- var i,cmd,arrCmd=['Link','Img','Flash','Media'],arrExt=[],strExt;
- for(i in arrCmd){
- cmd=arrCmd[i];
- if(settings['up'+cmd+'Url']&&settings['up'+cmd+'Url'].match(/^[^!].*/i))arrExt.push(cmd+':,'+settings['up'+cmd+'Ext']);//允许上传
- }
- if(arrExt.length===0)return false;//禁止上传
- else strExt=arrExt.join(',');
- function getCmd(fileList){
- var match,fileExt,cmd;
- for(i=0;i<fileList.length;i++){
- fileExt=fileList[i].fileName.replace(/.+\./,'');
- if(match=strExt.match(new RegExp('(\\w+):[^:]*,'+fileExt+'(?:,|$)','i'))){
- if(!cmd)cmd=match[1];
- else if(cmd!==match[1])return 2;
- }
- else return 1;
- }
- return cmd;
- }
- cmd=getCmd(fileList);
- if(cmd===1)alert('上传文件的扩展名必需为：'+strExt.replace(/\w+:,/g,''));
- else if(cmd===2)alert('每次只能拖放上传同一类型文件');
- else if(cmd){
- _this.startUpload(fileList,settings['up'+cmd+'Url'],'*',function(arrMsg){
- var arrUrl=[],msg,onUpload=settings.onUpload;
- if(onUpload)onUpload(arrMsg);//用户上传回调
- for(i in arrMsg){
- msg=arrMsg[i];
- url=is(msg,'string')?msg:msg.url;
- if(url.substr(0,1)==='!')url=url.substr(1);
- arrUrl.push(url);
- }
- _this.exec(cmd);
- $('#xhe'+cmd+'Url').val(arrUrl.join(' '));
- $('#xheSave').click();
- });
- }
- return false;
- }
- });
也有这样的：HTML5拖放(Drag&Drop)API详细介绍和示例，当然这里我就不多贴代码了。不过文中最后一段是告诉我们有哪些事件可以用：
可以使用的新事件一共有这些：
dragstart
A drag has been initiated, with the dragged element as the event target.
drag
The mouse has moved, with the dragged element as the event target.
dragenter
The dragged element has been moved into a drop listener, with the drop listener element as the event target.
dragover
The dragged element has been moved over a drop listener, with the drop listener element as the event target. Since the default behavior is to cancel drops, returning false or calling preventDefault() in the event handler indicates that a drop is allowed here.
dragleave
The dragged element has been moved out of a drop listener, with the drop listener element as the event target.
drop
The dragged element has been successfully dropped on a drop listener, with the drop listener element as the event target.
dragend
A drag has been ended, successfully or not, with the dragged element as the event target.
并且注意能够被拖拽的元素一定要有这个属性：draggable=”true”
在web上面拖放一直以来都是个难题(strange beast)，但是至少现在我们有一堆丰富的API了…. 所以也许这个方式会开始大行其道呢？