HTML5 拖放API

     HTML5 为拖放行为提供了Drag & Drop API，Drag代表拖动，Drop代表放下。用于方便的处理这类事件。相较于以前需要用javascript来进行且需要对不同浏览器的各种版本进行不一样的写法而言，拖放的API无疑是开发者的福祉。下面是我学习的笔记。

     

     尽管如此目前还是有各种浏览器可能不支持拖放API所以在使用拖放API之前先判断该浏览器是否支持。调用modernizr.js文件，Modernizr是为HTML5而生的开源js库，他能检测HTML5和CSS3的每一个新特性。到http://www.modernizr.com/下载相应的js文件，具体使用方法可以参考

http://developer.51cto.com/art/201103/250080.htm。

 

     拖放API的主要操作

     拖放API主要内容包括:事件、属性和接口。

     1、主要事件

          dragstart:拖动开始事件，绑定到拖拽的对象上。

          drag:从dragstart开始到dragend结束前，在拖动时不断出现，也绑定到拖拽的对象上

          dragend:拖动结束事件，绑定到拖拽的对象上。

          dragenter:拖到当前元素区域内的事件，绑定在拖拽对象所拖拽的对象上

          dragover:拖到当前元素的区域事件，该事件在拖动到过程中不断的触发，需要绑定在拖拽对象正拖拽到的对象上

          dragleave：拖出当前元素区域事件，绑定到拖拽对象刚刚拖拽到的对象上

          drop:当前元素区域停止拖拽的事件，绑定在拖拽对象所放置到的对象上    ps:drop往往发生在dropend事件前

 

          2、相关属性

          默认情况下，img和a标签上可以拖跩的，其他标签需要添加draggable="true"，接着为他的dragstart添加事件函数。此外还有一个dropzone属性，用于设置放置目标区域所允许的文件类型和反馈方式。eg: move  s:text/plain表示数据移动的效果和接受任何文本的放置。因此要是一个元素允许他拖拽元素放置到他上面，此元素必须有dropzone属性并且监听drop事件。不过也可以通过自定义事件处理的方式代替dropzone属性，这就需要在dropenter事件里判断元素是否支持放置以及在dragover事件里指定为用户显示什么样的反馈效果。

 

 

          3、主要接口

          使用dataTransfer接口来支持拖放数据存储，他的使用方式一般为event.dataTransfer。dataTransfer不仅可以用来传递数据还可以用来指定拖拽对象和放置对象所表现的反馈结果。

          dataTransfer.effectAllowed[=value]。该属性返回拖拽对象允许的拖拽时的反馈效果。用于初始化dragenter和dragover事件时允许的dropEffect属性，可以设置的值如下:   

 

 
 


 
 


 
 


 
 


 
 


 
 

值                             描述	值                            描述
uninitialized       未设置任何效果	copyLink        允许dropEffect复制和连接的效果
none                  不允许设置任何效果	copyMove      允许dropEffect复制和移动的效果
copy                  只允许dropEffect复制效果	linkMove        允许dropEffect链接和移动效果
link                    只允许dropEffect连接效果	all                 允许所有效果
move                只允许dropEffect移动效果

默认值为uninitialized。该属性在拖拽对象的dragstart事件处理函数中设置，例如代码如下:

dragElement.ondragstrat = function(e){
    var dt = e.dataTransfer;
    dt.effectAllowed='link';
}

         

          dataTransfer.dropEffect[=value]。该值返回已设置的拖放时反馈的效果。  作为方法，可以设置拖放对象时表现的反馈效果，包含如下值: none、copy、link和move，这几个属性分别表示拖拽对象不能被放置在此处、拖拽对象被复制到放置对象、拖拽对象被链接到放置对象、拖拽对象被移动到放置对象。dropEffect的设置可以放置对象的dragenter或dragover事件处理函数中处理。代码如下:

 

dropElement.ondragover= function(e){
    var dt=e.dataTransfer;
    dt.dropEffect= 'link';
    e.preventDefault();
}

如果该效果与effectAllowed的效果不符操作将会失败。

 

         dataTransfer.items:返回一个关于拖拽数据的dataTransferItemList对象

         dataTransfer.setDragImage(element ,x ,y):指定拖拽元素时随鼠标移动的图片。x、y分别是图片相对于鼠标的横坐标和纵坐标。

         dataTransfer.addElement(element):将元素添加到被拖拽到元素的列表中，如果想让某个元素跟被拖拽到元素一起被拖拽可以使用该方法。

         dataTransfer.types:返回dragstart触发时为元素的存储数据类型，如果是系统文件则返回files。

         dataTransfer.setData(format ,data ):为元素添加数据，在dragstart事件触发时可以用它为拖拽元素存储数据。setData的格式一般有两种:text/plain(format:text主要用于文本数据) 和 text/uri-list(format:url，主要用于url)。

        data=dataTransfer.getData(format)：返回数据的存储类型，如果文件不存在则返回空。

        dataTransfer.clearData([format])：删除指定格式的数据，如果不指定格式则删除全部数据。

        dataTransfer.files:如果拖拽的是系统文件，返回正在拖拽到文件列表

 

       例子:

 

 1 var dragElement=doucument.getElementById("drag_element");
 2     var dropElement=doucument.getElementById("drop_element");
 3     
 4     dragElement.setAttribute("draggable","true");
 5     
 6     dragElement.ondragstart = function(e){
 7         var dt=e.dataTransfer;
 8         dt.effectAllowed='link';
 9     }
10     
11     dropElement.ondragover =function(e){
12         e.preventDefault();
13     }
14     
15     dropElement.ondrop = function(e){
16         dropElement.innerHtml ="end drag & drop";
17     }
18     
19     //dropEffect与effectallowed对应
20     dropElement.ondragenter =function(e){
21         var dt=e.dataTransfer;
22         dt.dropEffect='link';
23         e.preventDefault();
24     }