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

图 2 中可拖动实体的“within”属性为“false”，因此当前的位置是合法的。但是可能在某些时候，需要使用到更细致的活动范围控制，或者需要根据可拖动实体的 DOM 父节点确定其活动范围，而不是距页面的边距。对于这些情况，可以采用 Dojo 提供的第二种限制用户可拖动实体活动范围的方法。

Dojo 限制用户可拖动实体活动范围的第二种方法是在所有可拖动实体的外面创建一个 DOM 父节点，然后利用该父节点的“Layout”属性将可拖动实体的运动范围限制在父节点内。以此为基础，依据父节点四种不同的“Layout”属性分为 “margin”类型的限制，“border”类型的限制，“padding”类型的限制，和“content”类型的限制。 ( “margin”，“border”，“padding”和“content”是 Web 页面中一个实体的 CSS 属性 ) 。

清单 5

　<style　type="text/css">/*　定义四个可拖动实体父节点的　Layout　结构　,　
对可拖动实体拖动范围有影响的属性包括　"border","padding"　和　"margin"*/　
　.parent　
　{　
　background:　#BFECFF;　
　border:　10px　solid　lightblue;　
　width:　500px;　
　height:　500px;　
　padding:　10px;　
　margin:　10px;　
　}　
　</style>　
　<script　type="text/javascript">　
　dojo.require("dojo.dnd.move");　
　dojo.require("dojo.parser");　
　function　init()　
　{　
　new　dojo.dnd.move.parentConstrainedMoveable("bad",　{area:　"padding",　within:　true});　
　<!--　该可拖动实体的范围不能超过父节点的　padding　区域边界　-->　
　new　dojo.dnd.move.parentConstrainedMoveable("good",　{area:　"content",　within:　true});　
　<!--　该可拖动实体的范围不能超过父节点的　content　区域边界　-->　
　};　
　dojo.addOnLoad(init);　
　</script>　
　
　<div　class="parent">　
　<div　style="background:red"　dojoType="dojo.dnd.move.parentConstrainedMoveable"　
　area="margin"　within="true">I　am　restricted　within　my　parent's　margins.</div>　
　<!--　该可拖动实体的范围不能超过父节点的　margin　区域边界　-->　
　<div　style="background:green"　dojoType="dojo.dnd.move.parentConstrainedMoveable"　
　area="border"　within="true">I　am　restricted　within　my　parent's　border.</div>　
　<!--　该可拖动实体的范围不能超过父节点的　border　区域边界　-->　
　<div　style="background:blue"　id="bad">I　am　restricted　within　my　parent's　paddings.</div>　
　<div　style="background:pink"　id="good">I　am　restricted　within　my　parent's　content.</div>　
　</div>