使用 Dojo 的 Ajax 应用开发进阶教程，第 7 部分: Dojo 核心库深入介绍

核心提示： 拖放操作从拖放操作本身来说，需要一个源和一个目标，使用 Dojo 的 Ajax 应用开发进阶教程，第 7 部分: Dojo 核心库深入介绍(7)，源和目标分别是通过 dojo.dnd.Source和 dojo.dnd.Target类来表示的，从实现上来说，拖放条目的 DOM 节点是作为拖放源节点

拖放操作

从拖放操作本身来说，需要一个源和一个目标。源和目标分别是通过 dojo.dnd.Source和 dojo.dnd.Target类来表示的。从实现上来说，dojo.dnd.Target继承自 dojo.dnd.Source。如果同时是源和目标的话，应该使用 dojo.dnd.Source来表示。在拖放的源中可以包含多个能够被拖动的条目，需要对这些条目进行管理。dojo.dnd.Container表示的是包含能被拖动的条目的容器，用来实现对条目的管理。对于 dojo.dnd.Container中包含的条目，需要有一种方式允许用户进行选择，比如一次选中一个或多个条目。dojo.dnd.Selector继承自 dojo.dnd.Container，并添加了与选择条目相关的功能。dojo.dnd.Source类则是继承自 dojo.dnd.Selector的。当用户拖拽一个包含在 dojo.dnd.Source中的条目在页面上移动的时候，需要以直观的方式告知用户条目的当前位置。dojo.dnd.Avatar用来实现这样的功能。除了上面提到的四个类之外，dojo.dnd.Manager用来管理整个拖放的过程。

在 Ajax 应用中使用拖放操作的时候，首先需要根据应用场景定义清楚拖放的源和目标。这些操作要符合用户的使用习惯，以免影响用户体验。比如用拖放操作来改变一个列表中元素的顺序，或是拖放所选择的物品到购物车中，这些都是比较合理的拖放操作的场景。完成这一步之后，就可以从表示拖放源的 DOM 节点中创建 dojo.dnd.Source对象了。dojo.dnd.Source的构造方法有两个参数：第一个参数 node表示的是拖放源的 DOM 节点，第二个参数 params是一个包含配置项的 JavaScript 对象。对于拖放源中所包含的条目，有抽象和具体两种表示方式。抽象的表示方式是一个 JavaScript 对象，其中包含的内容由应用自己来定义。具体的表示方式则是 DOM 节点。创建 dojo.dnd.Source对象的时候，需要传入一个 JavaScript 方法用来从抽象的 JavaScript 对象中创建出具体的 DOM 节点。该方法由 params对象的 creator属性来指定。该方法有两个参数，第一个 item表示的是代表拖放条目的 JavaScript 对象，第二个 hint用来说明创建出的具体 DOM 节点的用途，目前只支持一个值 avatar，表示创建的 DOM 节点是给 dojo.dnd.Avatar使用的。该方法需要返回一个包含属性 node、data和 type属性的 JavaScript 对象。其中属性 node表示的是创建出来的 DOM 节点，data表示的是抽象的 JavaScript 对象，type表示的是拖放条目的类型，用来判断是否可以被拖放到某个目标上。一般来说，拖放条目的 DOM 节点是作为拖放源节点的直接子节点的。如果想使用其它节点的话，可以通过 params对象的 dropParent属性来指定。