在 HTML5 中，我们需要给指定的节点来绑定一些事件来使之成为具有源容器或目标容器的功能。在 HTML5 的拖拽过程中的事件有 7 个，分别是应用在目标容器或拖动节点上的 dragstart,drag,dragend 等 3 个事件，以及应用在目标容器节点上的dragenter,dragover,dragleave 和 drop 等 4 个事件。表 1 中对这些事件的触发机制和常见的操作进行了描述。

表 1. HTML5 拖拽过程中可以绑定的事件

备注 : 在 Dojo 中所有 dnd 源容器或目标容器在拖拽开始时都会调用 onDndStart 事件方法，而在 HTML5 中只有拖动的节点及源容器可以触发 dragstart 事件，其他容器包括目标容器在拖动开始时不会感知源容器及拖动节点的 dragstart 事件。

清单 4 展示给目标容器绑定 dragenter,dragleave,drop 事件的示例代码。在 dragenter 和 dragleave 事件中，我们对目标容器的背景样式进行修改使得用户感知目标容器的状态（如图 2 所示）。在 dragover 事件中我们对清单 3 中的链接元素（id 属性值为 item3）的节点进行了限制。drop 事件中我们要把拖动的节点插入到目标节点的 DOM 结构中。

清单 4. 创建目标容器的事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

var target = dojo.byId('target');
 dojo.connect(target, 'dragover'function(e){
  // doesn't allows link item (id = “item3”) to drop
  if (e.dataTransfer.getData'id') != "item3"{
    e.preventDefault(;
  }
 }; 

 dojo.'dragenter'//add style
  dojo.addClass"over";
 'dragleave'//remove style
  dojo.removeClass'drop'//remove style if drop is successful
  dojo.; 

  // stops the browser from redirecting
  stopPropagation) e.var itemId = e.var dragItem (itemId;
  e.target.appendChild(dragItem;  	

 }

图 2. 当拖动节点到目标容器是时对目标容器进行高亮显示

从清单 4 中我们在目标容器上对事件对象的 dataTransfer 属性进行了 getData 操作——取出了关键字 id 对应的数据。在 HTML5 拖拽过程中，用户可以在表 1 定义的事件里通过 event.dataTransfer 得到 DataTransfer 对象 ( 详见 W3C 网站上的接口定义）并对其进行定制传输数据、定制拖拽影像等操作。例如我们可以在 dragstart 事件中通过 setData 方法初始化数据（代码详见附件）。表 2 中列出了这各数据对象的方法及常用的用途。

与桌面进行交互

除了在网页中对一些页面上的元素进行拖拽以外，HTML5 扩充的 API 还允许网页与文件系统进行交互，比如从文件系统拖一个或几个文件到网页中，或是从网页拖到文件系统中。以前者为例，当我们从桌面或其它文件夹拖动文件到网页上某个目标结点时，我们可以通过 DataTransfer 的 files 属性得到这些文件数量以及文件的属性及内容。DataTransfer.files.length 的大小即为拖动文件的数量，当没有拖动文件时，files.length 的大小即为 0，可用来判断是否有文件拖动。

清单 5. 通过 dataTransfer.files 拿到文件对象

1
2
3
4
5
6
7
8
9
10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

dojo.(textdiv; }
  {
    msg fileName fileSize;
    ;
    dataReader.{
      msg ;
      textdiv.textContent = msg}
    dataReader.;

• 上一篇：dojo datagrid filter下一篇：dojo datagrid row formatter / la