ASP.NET 2.0 Atlas编写鼠标拖放程序

三. 强制性拖放

　　为了使用编程方式来实现相同的功能，我们需要进行一些编程，但是不需要较多的编码。你必须明白，当你把一个Atlas脚本管理器组件添加到你的页面上时，你实际上是在下命令把Atlas JavaScript库加载到你的页面。这个Atlas库提供了扩展DOM的客户端类，并且提供允许你在一个浏览器中进行编码的工具（尽管现在在Safari兼容性方面还存在一些问题）。这些客户端类还允许你把你的HTML元素添加到行为。
为了切换到一个强制性模型，你需要用两个JavaScript函数来代替XML标记。第一个函数是一个普通脚本用于把漂浮行为添加到一个HTML元素上。它利用了Atlas客户端类来完成此功能：

＜script type="text/javascript"＞ function addFloatingBehavior(ctrl， ctrlHandle){ 　//创建新的漂浮行为对象 　var floatingBehavior = new Sys.UI.FloatingBehavior(); 　//漂浮行为类具有一个Handle属性 　floatingBehavior.set_handle(ctrlHandle); 　//把对象参考值的为Atlas客户端控件 　var dragItem = new Sys.UI.Control(ctrl); 　//从Atlas控件中取得行为集合 　//添加我们自己的漂浮行为 　dragItem.get_behaviors().add(floatingBehavior); 　//运行该漂浮行为的内部javascript 　floatingBehavior.initialize(); } ＜/script＞

　　这个函数使用两个参数值：你想要拖放的HTML元素和实现该拖放行为的拖放句柄HTML元素。然后，你实例化一个新的Atlas客户端行为对象。该漂浮行为具有一个handle属性-你把HTML元素的句柄传递给它。然后，你需要基于你想使之成为可拖放的控件以创建一个新的客户端控件对象。把你的div标签转换成一个Atlas客户端控件能够使你把Atlas行为添加到它上面。你可以使用get_behaviors()方法来返回一个行为集合，并且使用add方法来把一个新行为添加到你的HTML对象。最后，你调用行为对象的initialize()方法以允许在内部配置行为自身。我们将在本文剩下的部分中一直使用这个工具函数。

　　现在，当页面装载时，你需要调用addFloatingBehavior函数。说实话，这是编写这个示例中最有难度的编码部分。脚本管理器并不是简单地创建一个到Atlas JavaScript库的引用，我推想它实际把该库脚本装载到DOM。在任何情况下，这意味着，只有页面中的其它一切都装载后该库才得到加载。这样以来，我们所面临的问题在于，装载该库后，没有标准的方法来使我们的添加漂浮行为的代码运行；并且如果我们在加载该库前运行它，那么我们可以简单地生成JavaScript错误-因为我们调用的所有的Atlas方法都不能被发现。

　　其实，存在好几种方法可以来解决这个问题，但是最容易的方法是使用一个定制的Atlas事件pageLoad()-这个事件实际只在装载这些库后才调用它。为了把漂浮行为添加到你的div标签中，当第一次加载页面时（但是在库脚本装载后），你仅需要编写如下代码：

＜script type="text/javascript"＞ function pageLoad(){ 　addFloatingBehavior(document.getElementById('draggableDiv')，document.getElementById('handleBar')); } ＜/script＞

　　这可以使用一种Atlas脚本速记方式来书写-用"$()"代替"document.getElementById()"：

＜script type="text/javascript"＞ function pageLoad(){ 　addFloatingBehavior($('draggableDiv')，$('handleBar')); } ＜/script＞

　　在此，可以看到，你有一个可拖动的div，其行为与你使用声明性模型编写的可拖动的div完全一致。

　　四. 动态拖放

　　既然声明性模型比强制性模型更为清晰，那么为什么你还要编写自己的JavaScript来处理Atlas行为呢？其实，这种声明性模型的一个限制是，你只能使用一开始就位于该页面上的对象。如果你开始动态地把对象添加到该页面，那么你无法使用声明性模型来把漂浮行为添加到其上。不过，借助于强制性模型，你能够实现。

　　基于前面的例子，你要用一个据要求创建漂浮div的函数来代替pageLoad()函数。下列JavaScript函数会创建一个嵌有另一个div标签（用作一个handlebar）的div标签，然后把该div标签插入到当前的页面，并且最后把漂浮行为添加到div标签：

function createDraggableDiv() { 　var panel= document.createElement("div"); 　panel.style.height="100px"; 　panel.style.width="100px"; 　panel.style.backgroundColor="Blue"; 　var panelHandle = document.createElement("div"); 　panelHandle.style.height="20px"; 　panelHandle.style.width="auto"; 　panelHandle.style.backgroundColor="Green"; 　panel.appendChild(panelHandle); 　var target = $('containerDiv').appendChild(panel); 　addFloatingBehavior(panel， panelHandle); }

　　然后，你只需要把一个按钮添加到该调用createDraggableDiv()函数的页面。现在，新的HTML体看上去具有如下形式：

＜input type="button" value="Add Floating Div" onclick="createDraggableDiv();" /＞ ＜div id="containerDiv" style="background-color:Purple;height:800px;width:600px;"/＞

　　这将允许你把很多的可拖放元素添加到你的页面上，这说明了，一旦你理解了在以声明方式使用Atlas和以编程方式使用它之间的关系，那么Atlas将表现出强大的威力和灵活性。作为参考，下面是动态拖放示例的完整实现代码：

＜%@ Page Language="C#" %＞ ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞ ＜html xmlns="http://www.w3.org/1999/xhtml" ＞ ＜head runat="server"＞ ＜title＞Imperative Drag and Drop II＜/title＞ ＜script type="text/javascript"＞ function createDraggableDiv() { 　var panel= document.createElement("div"); 　panel.style.height="100px"; 　panel.style.width="100px"; 　panel.style.backgroundColor="Blue"; 　var panelHandle = document.createElement("div"); 　panelHandle.style.height="20px"; 　panelHandle.style.width="auto"; 　panelHandle.style.backgroundColor="Green"; 　panel.appendChild(panelHandle); 　var target = $('containerDiv').appendChild(panel); 　addFloatingBehavior(panel， panelHandle); } function addFloatingBehavior(ctrl， ctrlHandle){ 　var floatingBehavior = new Sys.UI.FloatingBehavior(); 　floatingBehavior.set_handle(ctrlHandle); 　var dragItem = new Sys.UI.Control(ctrl); 　dragItem.get_behaviors().add(floatingBehavior); 　floatingBehavior.initialize(); } ＜/script＞ ＜/head＞ ＜body＞ ＜form id="form1" runat="server"＞ ＜atlas:ScriptManager ID="ScriptManager1" runat="server"＞ ＜Scripts＞ ＜atlas:ScriptReference ScriptName="AtlasUIDragDrop" /＞ ＜/Scripts＞ ＜/atlas:ScriptManager＞ ＜h2＞Imperative Drag and Drop Code with javascript: demonstrate dynamic loading of behaviors＜/h2＞ ＜input type="button" value="Add Floating Div" onclick="createDraggableDiv();" /＞ ＜div id="containerDiv" style="background-color:Purple;height:800px;width:600px;"/＞ ＜/form＞ ＜/body＞ ＜/html＞