第5章HTML5拖放API
本章主要介绍HTML5拖放API的功能与应用。HTML5拖放API可以用于拖曳网页中的元素并放置到页面上的指定区域，也可以直接将本地计算机上的文件拖放到网页中。HTML5拖放API增强了页面友好度，使用该技术可以开发出用户体验良好的人机交互界面。


本章学习目标：


 了解拖放的概念； 
 熟悉拖放事件DragEvent； 
 熟悉DataTransfer对象； 
 掌握拖放HTML元素的方法； 
 掌握拖放本地文件的方法。


 5.1HTML5新增拖放API
HTML5拖放API规定了所有元素都可以被拖放。具体来说，HTML5定义的拖放这一行为指的是用户可以使用鼠标左键点击选中允许拖放的元素或文件，在保持鼠标左键按下的情况下可以移动该元素至页面的任意位置，并且在移动到处于具有允许放置状态的元素上释放鼠标左键放置被拖放的元素。其中从鼠标左键按下选中元素，到保持鼠标左键按下并移动该元素的整个过程称为“拖”； 将被拖动的元素放置在许可放置的区域上方并释放鼠标左键的行为称为“放”。整个拖放过程增强了人机交互的功能。
 5.2浏览器支持情况
主流浏览器对HTML5拖放API的支持情况如表51所示。


表51主流浏览器对HTML5拖放API的支持情况



浏览器IEFirefoxChromeSafariOpera
支持情况9.0及以上版本4.0及以上版本20及以上版本5.0及以上版本12及以上版本


由此可见，目前所有的主流浏览器均支持HTML5拖放API。
 5.3HTML5拖放API的应用
 5.3.1DragEvent事件
拖放元素时的一系列动作会触发相关元素的拖放事件DragEvent，该事件继承于鼠标事件MouseEvent。DragEvent包含的常用事件类型如表52所示。


表52DragEvent的常用事件一览表



事 件 名 称存 储 模 式事 件 目 标解释


ondragstart读写模式该事件由被拖曳的元素触发当用户刚开始拖动元素时触发该事件
ondrag保护模式该事件由被拖曳的元素触发当元素处于被拖动状态时触发该事件
ondragenter保护模式该事件由被拖曳的元素触发当被拖动的元素进入到可以被放置下来的有效区域的瞬间触发该事件
ondragleave保护模式该事件由被拖曳的元素触发当被拖动的元素离开了可以被放置下来的有效区域的瞬间触发该事件
ondragover保护模式该事件由目标区域元素触发当被拖动的元素处于可以被放置下来的有效区域内时，该事件会不停地被触发。该事件状态在dragenter之后，在dragleave之前
ondrop只读模式该事件由目标区域元素触发当被拖动的元素被放置在有效的区域时触发该事件
ondragend保护模式该事件由被拖曳的元素触发当拖动操作结束时激发该事件。例如，在拖动元素的过程中释放鼠标左键或按下键盘上的Esc键均可触发该事件。该事件状态在drop之后








其中只有ondragstart事件为读写模式，ondrop事件为只读模式，其余所有事件均为保护模式状态。在读写模式下既可以写入数据进行传递也可以读取数据； 在只读模式下，只允许将数据读取出来，不可以写入新的数据； 在保护模式下，当前传递的数据不可以被修改或读取。
从用户在元素上点击鼠标左键开始拖曳行为，到将该元素放置到指定的目标区域中的整个拖放生命周期触发的事件按照顺序如下： 



dragstart-drag-dragenter-dragover-dragleave-drop-dragend


 5.3.2DataTransfer对象
HTML5拖放API允许在拖放过程中携带一项或多项自定义数据内容。这些数据内容可以使用拖放事件DragEvent中的datatransfer属性进行添加和处理，该属性来源于HTML5中的DataTransfer对象，其中包含的每项数据均可有独立的数据类型。
DataTransfer对象的常用属性如表53所示。


表53DataTransfer对象的属性一览表



属 性 名 称属性值解释


dropEffectnone
copy
move
link该属性用于获取或重置当前的拖放类型，共有4种取值
续表


属 性 名 称属性值解释


effectAllowednone
copy
copyLink
copyMove
link
linkMove
move
all
uninitialized提供所有允许的拖放类型
typesDOMString［］该属性为只读属性。返回值为字符串数组，包含了所有存入数据的类型
itemsDataTransferItemList对象该属性为只读属性。返回值为DataTransferItemList对象，该对象是以列表的形式保存所有的存入数据
filesFileList对象该属性为只读属性。如果拖放的是一个或多个本地文件，则该属性返回值为文件列表对象。如果拖放过程中没有涉及本地文件，则文件列表为空

DataTransfer对象的常用方法如表54所示。


表54DataTransfer对象的方法一览表



方 法 名 称解释


getData(format)获取DataTransfer对象中format格式的数据。一般在ondrop事件中使用，获取传递的数据内容。其中format替换成某种数据类型，例如，纯文本类型为text/plain
setData(format, data)将数据设置为format格式，并保存在DataTransfer对象中进行传递。一般在ondragstart事件中使用，设置需要传递的数据内容
clearData(［format］)清除DataTransfer对象中format格式的数据。如果省略参数，则表示清除全部数据
setDragImage(image,x,y)设置拖曳元素时所显示的自定义图标。其中image为图片对象，x和y分别指的是图标与鼠标在水平和垂直方向上的距离


 5.3.3拖放元素过程
在HTML5页面中实现拖放的主要过程如下： 
 为需要被拖放的元素添加draggable属性，使其允许被拖放。
 在被拖曳元素的ondragstart事件中初始化需要传递的数据信息。
 为作为放置区域的元素设置ondragover事件，取消默认操作。
 为作为放置区域的元素设置ondrop事件，接收并处理传递过来的数据内容。
1. 设置元素可拖放状态
在HTML5中规定所有元素都支持可拖放属性draggable，该属性值可以用于定义元素是否为可拖放状态。当draggable属性值设置为true时表示元素为可拖放状态，设置为false时表示元素不可以被拖放。
例如，将一个段落元素变为可拖放状态： 



p draggable="true"

这是一个可以被拖放的段落元素。

/p


注意： draggable属性值在声明时不可以被省略。例如，p draggable就是错误的写法，必须加上完整的布尔值(true或者false)。本示例中的p draggable="true"为正确的写法。
如果没有为元素设置draggable属性，则默认值为auto表示元素是否允许拖曳取决于浏览器的默认设置。一般情况下，只有图片元素img和带有href属性的超链接元素a无须设置draggable属性即可被拖放，其他元素可以通过设置draggable属性值为true来实现可拖放状态。
【例51】设置可拖放元素
使用draggable属性为元素设置可拖放状态。




视频讲解




1.!DOCTYPE html

2.html

3.head

4.meta charset="utf8"

5.titleHTML5拖放API之设置可拖放元素/title

6.style

7.p{

8.width:100px;/*设置段落元素宽100像素*/

9.height:100px;/*设置段落元素高100像素*/

10.background-color:yellow;/*设置段落元素背景色为黄色*/

11.}

12./style

13./head

14.body

15.h3HTML5拖放API之设置可拖放元素/h3

16.hr /

17.p draggable="true"这是一个可拖放的段落元素。/p

18./body

19./html




图51元素的拖曳效果

运行效果如图51所示。
【代码说明】
本示例包含了一个段落元素p，用于演示元素的拖曳效果。将该元素的draggable属性值设置为true表示允许拖放。为了更清晰地表达显示效果，本示例在head首尾标签之间为段落元素p添加了CSS内部样式表进行样式设置，规定了该段落元素为宽100像素、高100像素的矩形样式，并且定义了其背景颜色为黄色。
当前使用draggable属性实际上只能实现元素的拖曳效果，目前尚不能放置元素到其他指定区域，也不能在拖曳过程中传递有效的数据。这些功能需要配合拖放元素的事件DragEvent设置自定义回调函数来实现。
2. 为被拖曳元素传递数据
使用ondragstart事件监听元素刚被拖动的状态，此时可以为ondragstart事件设置自定义名称的回调函数。例如，设置一个自定义函数drag()来处理ondragstart事件： 



p draggable="true" ondragstart="drag(event)"

这是一个可以被拖放的段落元素。

/p


当用户开始拖动元素时，元素的ondragstart事件会被触发并调用drag()函数来传递事件参数event对象，其中event.datatransfer属性用于在拖放过程中传递数据。
DataTransfer对象的setData()方法可以用于为拖放事件添加不同类型的数据，包括纯文本、超链接、HTML代码等。其语法格式如下： 



dataTransfer.setData(format, data)


其中参数format用于填写数据类型，参数data用于填写需要传递的数据内容。
可用于传递的常用数据类型如下： 
 纯文本类型——text/plain； 
 超链接类型——text/urilist； 
 HTML代码类型——text/html。
例如，在之前ondragstart事件的回调函数drag()中设置传递的数据： 



function drag(ev){

ev.dataTransfer.setData("text/plain","Hello HTML5");//纯文本数据

ev.dataTransfer.setData("text/uri-list","http://www.test.com");//超链接数据

ev.dataTransfer.setData("text/html","h3Hello HTML5/h3");//HTML代码数据

}


这些传递数据目前只能在ondragstart事件的回调函数中进行设置，从页面上来看没有什么不同。后续需要在放置元素时使用datatransfer对象的getDate()方法进行获取数据才能显示其作用。
其中在触发ondragstart事件时可以读写数据。在触发ondrop事件时为只读模式，可以读取数据。其余所有事件状态下均为保护模式，不可以读写数据。
在event事件中的target属性表示被拖曳的元素对象，因此可以利用纯文本类型传递元素对象的id名称。仍然以ondragstart事件的回调函数drag()为例： 



function drag(ev){

ev.dataTransfer.setData("text/plain",ev.target.id); //纯文本数据，用于传递元素id名称

}


这样在可放置元素的目标区域就可以使用getData()方法获取此id名称，并且使用JavaScript中的document.getElementById()方法获得并处理被拖曳元素的对象。
3. 定义可放置元素的目标区域
由于被拖动的元素不可以放置在未定义的区域，因此需要将指定的元素定义为可放置区域才能用于放置被拖动的元素。作为可放置区域的元素必须带有ondragover事件，用于监听是否有可拖放的元素进入了目标区域。
例如，将另外一个段落元素p设置为可放置区域，代码如下： 



p ondragover="allowDrop(event)"

这是一个可以放置被拖曳元素的段落区域。

/p


其中回调函数allowDrop()和drop()名称均可自定义，表示当前事件触发时的处理操作。
默认情况下无法将元素放置在其他元素中，因此需要在放置区域ondragover事件的回调函数中使用event.preventDefault()方法阻止默认处理。
以前面的自定义函数allowDrop()为例，相关JavaScript代码如下： 



function allowDrop(ev){

event.preventDefault();//阻止默认处理方式

}


event.preventDefault()方法可以禁用默认处理，因此在执行该方法后指定的区域允许用于放置被拖曳的元素。
4. 接收被拖曳元素的传递数据
当松开鼠标左键进行放置元素时，放置区域的ondrop事件被触发。此时可以使用datatransfer对象中的getData()方法获取传递的数据内容。
例如，为前面的放置区域p添加ondrop事件用于接收数据，代码如下： 



p ondragover="allowDrop(event)" ondrop="drop(event)"

这是一个可以放置被拖曳元素的段落区域。

/p


其中回调函数drop()名称可自定义，表示当前事件触发时的处理操作。
由于ondrop事件的默认行为是以超链接的形式打开数据，所以同样首先需要使用event.preventDefault()方法阻止原先的默认处理方式，然后可以在ondrop事件的回调函数中自定义需要处理的内容。例如： 



function drop(ev){

event.preventDefault();//阻止默认处理方式

var data = event.datatransfer.getData("text");//获取传递的文本类型数据

}


这里数据格式如果简写为text或url会被自动转换为text/plain类型或text/urilist类型。如果没有找到指定的数据内容，则返回一个空字符串。
【例52】拖放元素的简单应用
将段落元素p拖放到id="container"的div元素中。




视频讲解




1.!DOCTYPE html

2.html

3.head

4.meta charset="utf8"

5.titleHTML5拖放API的简单应用/title

6.style

7.p {

8.width: 100px;/*设置段落元素宽100像素*/

9.height: 100px;/*设置段落元素高100像素*/

10.background-color: yellow;/*设置段落元素背景色为黄色*/




11.}

12.div#container {

13.border: 1px solid;

14.width: 200px;

15.height: 200px;

16.}

17./style

18./head

19.body

20.h3HTML5拖放API的简单应用/h3

21.hr /

22.p id="test" draggable="true" ondragstart="drag(event)"

23.这是一个可以被拖放的段落元素

24./p

25.div id="container" ondragover="allowDrop(event)" ondrop="drop(event)"

26.这是一个可以用于放置被拖放元素的区域

27./div

28.script

29.//ondragstart事件回调函数

30.function drag(ev) {

31.//设置传递的内容为被拖曳元素的id名称，数据类型为纯文本类型

32.ev.dataTransfer.setData("text/plain", ev.target.id);

33.}

34.

35.//ondragover事件回调函数

36.function allowDrop(ev) {

37.//解禁当前元素为可放置被拖曳元素的区域

38.ev.preventDefault();

39.}

40.

41.//ondrop事件回调函数

42.function drop(ev) {

43.//解禁当前元素为可放置被拖曳元素的区域

44.ev.preventDefault();

45.//获取当前被放置的元素id名称

46.var id = ev.dataTransfer.getData("text");

47.//根据id名称获取元素对象

48.var p = document.getElementById(id);

49.//获取文件夹区域并添加该元素对象

50.ev.target.appendChild(p);

51.}

52./script

53./body

54./html


运行效果如图52所示。


图52段落元素的拖曳效果


【代码说明】
本示例包含了一个段落元素p，用于演示元素的拖曳效果。将id="test"的段落元素p的draggable属性值设置为true表示允许拖放，并且将id="container"的div元素设置为可放置区域。在拖动元素的过程中传递了段落元素的id名称，并且在放置元素时获取该id名称并且将被拖曳的段落元素移动到作为可放置区域的div元素中。
 5.3.4自定义拖放图标
使用DataTransfer对象中的setDragImage()方法可以自定义拖曳时显示的图标。其语法格式如下： 



setDragImage(image, x, y);


其中参数image表示Image对象，代表图标的来源。参数x和y分别表示图标与鼠标在水平方向和垂直方向上的距离。该方法一般用于ondragstart事件的回调函数中，表示从拖动动作开始时更改拖放图标。例如： 



function drag(ev){

var img = new Image();

img.src = "image/star.jpg";

ev.dataTransfer.setDragImage(img, 10, 10);

}


其中变量img为图片对象，指定的图片素材来源于本地的image文件夹中的star.jpg。
【例53】定义拖曳的数据和图标



1.!DOCTYPE html




视频讲解


2.html

3.head

4.meta charset="utf8"

5.titleHTML5拖放API之设置可拖放元素/title

6.style

7.p{

8.width:100px;/*设置段落元素宽100像素*/

9.height:100px;/*设置段落元素高100像素*/

10.background-color:yellow;/*设置段落元素背景色为黄色*/

11.}

12./style

13./head

14.body

15.h3HTML5拖放API之设置可拖放元素/h3

16.hr /

17.p draggable="true" ondragstart="drag(event)"这是一个可拖放的段落元素。/p

18.script

19.function drag(ev){




20.var img = new Image();

21.img.src = "image/star.jpg";

22.ev.dataTransfer.setDragImage(img, 5, 5);

23.}

24./script

25./body

26./html




图53元素的拖曳效果(自定义图标)

运行效果如图53所示。
【代码说明】
本示例包含了一个段落元素p用于演示元素的拖曳效果。将该元素的draggable属性值设置为true表示允许拖放，并且使用了setDragImage()方法设置了本地image目录中的star.jpg图片作为拖曳时显示的图标内容。

 5.3.5自定义拖放行为
DataTransfer对象具有effectAllowed和dropEffect属性用于规定拖放行为，当对元素进行拖放时，共有三种常见效果解释如下： 
 copy——表示被拖曳的数据将从它的初始位置复制到可放置区域。
 move——表示被拖曳的数据将从它的初始位置移动到可放置区域。
 link——表示被拖曳的数据将从它的初始位置链接一个快捷方式到可放置区域。
这三种效果根据组合又可以形成不同的样式要求，不同的拖放行为对应显示的鼠标图标样式各不相同，具体样式由浏览器和操作系统决定。一般可以在ondragstart事件被触发时通过设置effectAllowed属性值来规定允许进行何种操作。例如： 



ev.dataTransfer.effectAllowed = "move";


上述代码表示设置允许的操作为移动，effectAllowed的属性值只能在ondragstart事件中进行设置。
effectAllowed属性共有如下9种取值： 
 none——不允许任何操作； 
 copy——只允许复制操作； 
 copyLink——允许复制或者链接； 
 copyMove——允许复制或者移动； 
 link——只允许链接操作； 
 linkMove——允许链接或移动； 
 move——只允许移动操作； 
 all——允许所有(复制、移动或链接)操作； 
 uninitialized——尚未设置effectAllowed属性时的默认值，等同于all。
在拖曳元素的过程中，dropEffect属性值可以在dragenter或dragover事件中进行设置。
dropEffect属性共有如下4种取值： 
 none——不允许任何操作。
 copy——该状态下被拖曳的元素将复制一个副本放到指定的放置区域。
 move——该状态下被拖曳的元素将移动到指定的放置区域，该属性值为默认值。
 link——该状态下被拖曳的元素与可放置区域之间将创建连接。
dropEffect属性的取值会受到effectAllowed属性取值的约束。例如上面示例中设置effectAllowed属性值为move时，dropEffect的属性值也只能设置为move。effectAllowed与dropEffect属性取值的具体对应关系如表55所示。


表55effectAllowed与dropEffect属性取值对照表



effectAllowed设置的取值dropEffect允许的取值


nonenone
copycopy
copyLinkcopy或link
copyMovecopy或move
linklink
linkMovelink或move
movemove
allcopy、link或move任选其一
uninitialized并且被拖曳的元素为文本框中的内容move或copy
uninitialized并且被拖曳对象为普通元素copy或link
uninitialized并且被拖曳对象为带href属性的超链接元素alink或copy


【例54】自定义拖放行为
在多个可拖曳元素ondragstart事件的回调函数中设置不同的effectAllowed属性值以查看鼠标指针的显示效果。






视频讲解


1.!DOCTYPE html

2.html

3.head

4.meta charset="utf8"

5.titleHTML5拖放API之自定义拖放行为/title

6.style

7.p {

8.width: 100px;/*设置段落元素宽100像素*/

9.height: 100px;/*设置段落元素高100像素*/

10.background-color: lightblue;/*设置段落元素背景色为浅蓝色*/

11.float:left;

12.margin:10px;

13.text-align:center;

14.}

15.div#container {

16.border: 1px solid;

17.width: 340px;

18.height: 100px;

19.clear:both;

20.margin:10px;

21.text-align:center;

22.}

23./style

24./head




25.body

26.h3HTML5拖放API之自定义拖放行为/h3

27.hr /

28.p id="test1" draggable="true" ondragstart="drag1(event)"

29.拖曳效果brmove

30./p

31.p id="test2" draggable="true" ondragstart="drag2(event)"

32.拖曳效果brcopy

33./p

34.p id="test3" draggable="true" ondragstart="drag3(event)"

35.拖曳效果brlink

36./p

37.div id="container" ondragover="allowDrop(event)" ondrop="drop(event)"

38.可放置区域

39./div

40.script

41.//ondragstart事件回调函数

42.function drag1(ev) {

43.var dataTrans = ev.dataTransfer;

44.dataTrans.effectAllowed = "move";

45.//设置传递的内容为被拖曳元素的id名称，数据类型为纯文本类型

46.dataTrans.setData("text/plain", "ev.target.id");

47.}

48.function drag2(ev) {

49.var dataTrans = ev.dataTransfer;

50.dataTrans.effectAllowed = "copy";

51.//设置传递的内容为被拖曳元素的id名称，数据类型为纯文本类型

52.dataTrans.setData("text/plain", ev.target.id);

53.}

54.function drag3(ev) {

55.var dataTrans = ev.dataTransfer;

56.dataTrans.effectAllowed = "link";

57.//设置传递的内容为被拖曳元素的id名称，数据类型为纯文本类型

58.dataTrans.setData("text/plain", ev.target.id);

59.}

60.

61.//ondragover事件回调函数

62.function allowDrop(ev) {

63.//解禁当前元素为可放置被拖曳元素的区域

64.ev.preventDefault();

65.}

66.

67.//ondrop事件回调函数

68.function drop(ev) {

69.//解禁当前元素为可放置被拖曳元素的区域

70.ev.preventDefault();

71.}

72./script

73./body

74./html


运行效果如图54所示。


图54自定义拖放行为的不同显示效果


【代码说明】
本示例包含了三个可拖曳段落元素p，用于对比不同拖放行为导致鼠标指针显示效果的区别，其id名称分别为test1、test2和test3。为这三个段落元素添加ondragstart事件，并定义回调函数名称分别为drag1(event)、drag2(event)和drag3(event)，在其中分别设置effectAllowed属性值为move、copy和link。在页面上设置一个id="container"的可放置区域div，用于放置本示例的三个测试段落元素。
由图54可见，这三种拖放行为均显示正常的鼠标指针，以及指针下方会显示一个空心矩形框。不同的拖放行为会导致鼠标指针显示的样式稍有区别： move行为没有显示其他特殊内容； copy行为会在空心矩形的右下角显示一个加号符号的小图标； link行为会在空心矩形的右下角显示带一个箭头符号的小图标。
 5.3.6本地文件的拖放
除了页面上自带的HTML元素外，本地文件也可以使用HTML5拖放API进行拖曳并放置到页面的指定区域中。传递本地文件时无须设置传递的数据内容，直接在放置文件时使用DataTransfer对象的files属性即可获取文件列表，里面包含了所有文件。
【例55】HTML5拖放API之本地文件拖放
将本地文件拖放至页面的指定区域，使用DataTransfer对象的files属性将文件相关信息(例如，文件名称、修改时间、文件大小等内容)显示在页面上。




视频讲解




1.!DOCTYPE html

2.html

3.head

4.meta charset="utf8"

5.titleHTML5拖放API之本地文件拖放/title

6.style

7.#fileCheck {

8.width: 300px;

9.height: 100px;

10.border: 1px dashed;

11.margin: 20px;

12.}

13.li {

14.margin: 10px;

15.}

16./style

17./head

18.body

19.h3HTML5拖放API之本地文件拖放/h3

20.hr /

21.div id="fileCheck" ondragover="allowDrop(event)" ondrop="drop 

(event)"

22.请将文件拖放至此处。




23./div

24.div id="status"/div

25.script

26.//ondragover事件回调函数

27.function allowDrop(ev) {

28.//解禁当前元素为可放置被拖曳元素的区域

29.ev.preventDefault();

30.}

31.

32.//ondrop事件回调函数

33.function drop(ev) {

34.//解禁当前元素为可放置被拖曳元素的区域

35.ev.preventDefault();

36.//获取拖曳的文件列表

37.var files = ev.dataTransfer.files;

38.//用于记录文件的状态，包括文件名、文件大小、修改时间等

39.var fileStatus;

40.//用于获取单个文件对象

41.var f;

42.//使用for循环遍历所有文件

43.for (var i = 0; i  files.length; i++) {

44.//获取当前文件对象

45.f = files［i］;

46.//获取最近修改文件的日期对象

47.var lastModified = f.lastModifiedDate;

48.//将日期时间显示为纯文本形式

49.var lastModifiedStr = lastModified.toLocaleString();

50.

51.//组合文件相关信息

52.fileStatus += 'li文件名称：' + f.name + 'br文件类型：' 

+ f.type +'br文件大小：' + f.size + '字节br修改时间：'

+ lastModifiedStr + '/li';

53.}

54.//获取文件状态显示栏对象

55.var status = document.getElementById("status");

56.//更新文件信息至显示栏中

57.status.innerHTML = 'ul' + fileStatus + '/ul';

58.}

59./script

60./body

61./html


运行效果如图55所示。


图55本地文件的拖放效果


【代码说明】
本示例包含了一个id="fileCheck"的区域元素div作为本地文件的放置区域，并在CSS内部样式表中为其设置样式： 宽300像素、高100像素，带有1像素宽的虚线边框，且各边的外边距为20像素。其下方还有一个id="status"的div元素用于显示被拖曳放置的本地文件信息，由于初始状态尚无文件被放置，因此该元素内部为空。显示效果如图55(a)所示。
为该元素添加ondragover与ondrop事件，分别用于监听是否有元素进入该区域，以及是否有元素放置在该区域。这两个事件的回调函数分别为allowDrop(event)和drop(event)，函数名称均可自定义。在这两个函数中均使用ev.preventDefault()表示允许元素放置在当前区域。本地文件的拖曳过程由图55(b)所示。
在drop(event)函数中使用dataTransfer对象的files属性获取拖曳文件列表，由于拖曳规则是允许每次拖曳一个或同时拖曳多个文件进行放置，因此该对象返回值为数组的形式。使用for循环遍历本次拖放的所有本地文件，并将每个文件的相关信息累加到fileStatus变量中去。最后将fileStatus变量的全部内容更新到id="status"的div元素中，从而实时显示在页面上。放置本地文件后的页面效果如图55(c)所示。
 5.4本章小结
HTML5新增拖放API可以用于拖曳和放置所有指定的HTML元素。所有HTML元素均可以被设置为可拖放状态，并且可以将其放置到指定区域中。HTML5拖放API中包含了DragEvent事件与DataTransfer对象。其中DragEvent事件包含了从开始拖曳到放置完成的一系列拖放事件。DataTransfer对象中setData()方法可用于在拖曳过程中设置传递的数据，而getData()方法可用于在放置过程中获取传递的数据。
HTML5拖放API可以自定义拖放时显示的图标与不同拖放行为，不同的拖放行为(例如复制、移动、链接等动作)所显示的鼠标指针样式也有所区别。HTML5拖放API还允许拖放本地文件，并且获取文件的名称、修改时间、大小等相关信息。
 习题5

1. 如何将元素设置为允许拖放的状态？
2. 元素被拖曳直到放置在指定区域的完整过程中依次触发了哪些拖放事件？
3. 可在拖放过程中被传递的常见数据类型有哪些？
4. 使用DataTransfer对象中的何种方法可以自定义拖放图标？
5. 如何将指定元素设置为允许放置元素的目标区域？
6. 在进行本地文件的拖放时，DataTransfer对象中的哪个属性可以用于获取文件列表？