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

核心提示： 在清单 2 中，没有设置可拖动实体的任何属性，掌握 Dojo 工具包，第 4 部分: Dojo 中的拖拽(4)，在清单 3 中设置了与拖动相关的其中一个属性——拖动柄，限制可拖动实体拖动的范围Dojo 限制用户可拖动实体活动范围的方法有两种，在第一种方法中的活动范围空间是

在清单 2 中，没有设置可拖动实体的任何属性。在清单 3 中设置了与拖动相关的其中一个属性——拖动柄。

限制可拖动实体拖动的范围

Dojo 限制用户可拖动实体活动范围的方法有两种。第一种方法为在生成可拖动实体的时候，给其设置一个逻辑上的活动范围空间；第二种方法是依据页面的一个实体，建立可拖动实体的活动范围空间。需要注意的是，在第一种方法中的活动范围空间是一个不存在相应页面实体的定义，即这个所谓的活动范围空间在页面是实际不存在的。首先要讨论的是第一种方法的使用。

清单 4

　<script　type="text/javascript">　
　dojo.require("dojo.dnd.move");　
　dojo.require("dojo.parser");　
　var　init　=　function(){　
　new　dojo.dnd.move.boxConstrainedMoveable("aa",　{box:　{l:　100,　t:　100,　w:　500,　
　h:　500}});//　定义可拖动实体　"aa"　和拖动的范围　box　
　new　dojo.dnd.move.boxConstrainedMoveable("bb",　{box:　{l:　100,　t:　100,　w:　500,　
　h:　500},　within:　true});　
　};　
　dojo.addOnLoad(init);　
　</script>　
　
　<div　id="aa">aaa</div>　
　<div　id="bb">bbb</div>　
　<div　id="cc"　dojoType="dojo.dnd.move.boxConstrainedMoveable"　
　box="{l:　100,　t:　100,　w:　500,h:　500}">ccc</div>　
　<div　id="dd"　dojoType="dojo.dnd.move.boxConstrainedMoveable"　
　box="{l:　100,　t:　100,　w:　500,　h:　500}"　within="true">ddd</div>