掌握 Dojo 工具包，第 4 部分: Dojo 中的拖拽

核心提示： 因此可拖放实体的存在，在拖放动作前必须依赖于一个父 DOM 节点，掌握 Dojo 工具包，第 4 部分: Dojo 中的拖拽(10)，这就是源容器，拖放动作后也必须依赖于一个新的父 DOM 节点，清单 9functioninit(){mysource=newdojo.dnd.Source(&qu

因此可拖放实体的存在，在拖放动作前必须依赖于一个父 DOM 节点，这就是源容器，拖放动作后也必须依赖于一个新的父 DOM 节点，这就是目标容器。

在某些情况下，可能需要的是能在几个容器之间将可拖放实体不断的拖来拖去。那么所做的修改是只需要将源容器和目标容器都用 dojoType= “dojo.dnd.Source”来进行声明就能实现可拖放实体从目标容器拖回源容器的操作。

动态生成源容器、目标容器和可拖放实体

动态声明源容器和目标容器的方法比较简单，动态创建源容器的方法为 var foo=new dojo.dnd.Source(Node, Params)，而动态创建目标容器的方法为 var foo=new dojo.dnd.Target(Node, Params) 。在声明源容器的方法中，Node 为要声明为源容器的 DOM 节点 id，Params 所代表的是一些用来确定容器相关属性的参数。

清单 9

　function　init()　
　{　
　mysource　=　new　dojo.dnd.Source("mysource",{});//　存放可拖放实体的　"　源容器　"　
　mytarget　=　new　dojo.dnd.Target("mytarget",{});//　存放可拖放实体的　"　目标容器　"　
　}　
　
　<table><tbody><tr>　
　<td>　
　<div　id="mysource"　style="border:　1px　solid　black;　height:　200px;　width:　300px;">SOURCE　
　<div　class="dojoDndItem"　style="height:50px;width:100%;background-color:blue">　
　<div　class="bluesquare">BLUE</div>　
　</div><!--　定义一个颜色为蓝色的矩形可拖放实体　-->　
　<div　class="dojoDndItem"　style="height:50px;width:100%;background-color:red">　
　<div　class="redsquare">RED</div>　
　</div><!--　定义一个颜色为红色的矩形可拖放实体　-->　
　</div><!--　定义了一个容器，该容器为可拖放实体在拖放开始前，可拖放实体存放的地方。　
将其名定义为源容器　-->　
　</td>　
　<td>　
　<div　id="mytarget"　style="border:　1px　solid　black;　height:　200px;　width:　300px;">　
　TARGET</div>　
　</td>　
　</tr></tbody></table>