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

核心提示： 接下来就是在拖放源中添加拖放条目，这些条目有可能是固定的，使用 Dojo 的 Ajax 应用开发进阶教程，第 7 部分: Dojo 核心库深入介绍(8)，也可能是动态变化的，对于条目固定的情况，拖放才能完成，这样就可以进行基本的拖放操作，可以直接以声明式的方式来增加条目，只需要在拖放源的 DOM

接下来就是在拖放源中添加拖放条目。这些条目有可能是固定的，也可能是动态变化的。对于条目固定的情况，可以直接以声明式的方式来增加条目。只需要在拖放源的 DOM 节点下定义包含 CSS 类 dojoDndItem的节点即可。dojo.dnd提供了默认的 creator方法来完成转换。每个节点本身、其属性 dndData和 dndType分别作为 creator方法返回值中的 node、data和 type属性的值。对于动态的条目，则需要使用 dojo.dnd.Source提供的 insertNodes(addSelected, data, before, anchor)方法。该方法的参数 addSelected表示添加的条目是否为被选中的状态；data表示的是包含条目抽象内容 JavaScript 对象的数组，会交给 creator方法来创建具体的 DOM 节点；before和 anchor用来表示条目节点的插入位置，anchor表示的是参考节点，而 before表示是插入的位置在参考节点之前还是之后。

创建了拖放源和其中的条目之后，下一步就是创建拖放目标。创建 dojo.dnd.Target的实例就可以表示一个拖放目标。创建目标的时候，通过第二个参数 params对象的属性 accept可以设置该目标接受的条目类型。只有当 accept 属性的值与创建条目时 creator方法返回值中 type属性的值相匹配的时候，拖放才能完成。这样就可以进行基本的拖放操作。代码清单 4 中给出了使用 dojo.dnd实现的简单拖放操作。

清单 4. 简单拖放操作

　<div　id="source">　
　　<div　class="dojoDndItem"　dndType="myItem">　测试条目　1</div>　
　　<div　class="dojoDndItem"　dndType="myItem">　测试条目　2</div>　
　　<div　class="dojoDndItem"　dndType="myItem">　测试条目　3</div>　
　</div>　
　<div　id="target">　
　</div>　
　
　var　source　=　new　dojo.dnd.Source("source");　
　var　target　=　new　dojo.dnd.Target("target",　{　
　accept　:　["myItem"]　
　});