结合 GFX，DnD 与 Dijit 创建基于 Dojo 的 Web 图形类应用

核心提示： 清单 3. 使用 DnD 实现图形的选择和拖放vargShapeContainer=dojo.byId("shapecontainer");vargShapeBtn=dojo.byId("someshape");dojo.addClass(gShapeBt

清单 3. 使用 DnD 实现图形的选择和拖放

　var　gShapeContainer　=　dojo.byId("shapecontainer");　
　var　gShapeBtn　=　dojo.byId("someshape");　
　dojo.addClass(gShapeBtn,　"dojoDndItem");　
　//　创建源区域，并限制一次拖放操作只能选择并复制一个　dataitem　到目标区域　
　var　source　=　new　dojo.dnd.Source(gShapeContainer,　{copyOnly:true,　singular:true});　
　
　//　创建目标区域，creator　方法用于创建一个　dataitem　在拖放过程中的呈现形式　
　var　target　=　new　dojo.dnd.Target(gTestContainer,　{　
　creator:function(data,　hint){　
　var　dummyNode　=　dojo.doc.createElement("div");　
　　dummyNode.id　=　"dummyShape";　
　return　{node:　dummyNode,　data:　data,　type:[]};　
　}　
　});　
　
　//　获取鼠标停止位置，即拖放位置　(x,　y)　坐标　
　var　dropPosition　=　null;　
　dojo.connect(gTestContainer,　"onmouseup",　dojo.hitch(this,　function(e)　{　
　var　pos　=　dojo.coords(gTestContainer,　true);　
　dropPosition　=　{x:　(e.pageX　-　pos.x),　y:　(e.pageY　-　pos.y)　};　
　}));　
　
　//　目标区域在拖放位置创建相应的图形　
　dojo.connect(target,　"onDrop",　dojo.hitch(this,　function(source,　nodes,　copy)　{　
　surface.createCircle({cx:　dropPosition.x,　cy:　dropPosition.y,　r:20})　
　　　.setFill([0,　255,　0,　0.5])　
　　　.setStroke({color:　"green",　width:　1});　
　}));　
　//　删除拖放过程中创建的“临时　avatar”的　DOM　Node　
　dojo.subscribe("/dnd/drop",　dojo.hitch(this,　function(source,　nodes,　copy,　target)　{　
　var　dummyNode　=　dojo.byId("dummyShape");　
　gTestContainer.removeChild(dummyNode);　
　}));