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

核心提示： 代码清单 4 中给出了采用声明式的方式实现的简单拖放操作，默认情况下，使用 Dojo 的 Ajax 应用开发进阶教程，第 7 部分: Dojo 核心库深入介绍(9)，被拖拽的条目会从拖放源中删除，添加到拖放目标中，代码清单 5 中给出了动态添加拖放条目和定制条目拖动时显示方式的一个示例，清单 5

代码清单 4 中给出了采用声明式的方式实现的简单拖放操作。默认情况下，被拖拽的条目会从拖放源中删除，添加到拖放目标中。如果希望只是从拖放源复制到目标的话，在创建 dojo.dnd.Source的时候，可以指定 params的属性 copyOnly的值为 true。

如果希望定制拖放条目被拖动时的显示方式，需要利用 creator方法创建出所需的节点。代码清单 5 中给出了动态添加拖放条目和定制条目拖动时显示方式的一个示例。

清单 5. 动态添加拖放条目和定制条目拖动时显示方式

　var　source　=　new　dojo.dnd.Source("source",　{　
　　creator　:　function(item,　hint)　{　
　　　　var　n;　
　　　　if　(hint　==　"avatar")　{　
　　　　　　n　=　dojo.create("div",　{　
　　　　　　　　innerHTML　:　dojo.replace("<span>{title}</span>",　item)　
　　　　　　});　
　　　　}　
　　　　else　{　
　　　　　　n　=　dojo.create("div",　{　
　　　　　　　　innerHTML　:　dojo.replace("<h4>{title}</h4><div>{description}</div>",　item)　
|-------10--------20--------30--------40--------50--------60--------70--------80--------9|　
|--------　XML　error:　The　previous　line　is　longer　than　the　max　of　90　characters　---------|　
　　　　　　});　
　　　　}　
　　　　return　{　
　　　　　　node　:　n,　data　:　item,　type　:　["book"]　
　　　　};　
　　},　
　　copyOnly　:　true　
　});　
　var　target　=　new　dojo.dnd.Target("target",　{　
　　creator　:　function(item,　hint)　{　
　　　　return　{　
　　　　　　node　:　dojo.create("span",　{　
　　　　　　　　innerHTML　:　item.title　
　　　　　　}),　
　　　　　　data　:　item,　
　　　　　　type　:　["book"]　
　　　　};　
　　},　
　　accept　:　["book"]　
　});　
　source.insertNodes(false,　[　
　　{title　:　"图书　1",　description　:　"一本不错的书。"},　
　　{title　:　"图书　2",　description　:　"这也是一本好书。"}　
　]);