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

六. 强制性Dropzone

　　为了使用JavaScript代替声明性脚本创建dropzone，仅需要使用定制的dropzone行为添加如下的JavaScript函数来初始化你的dropzone元素：

function addDropZoneBehavior(ctrl){ 　var dropZone = new Sys.UI.Control(ctrl); 　var dropZoneBehavior = new Custom.UI.DropZoneBehavior(); 　dropZone.get_behaviors().add(dropZoneBehavior); 　dropZoneBehavior.initialize(); }

　　为了"钩住"一切，你可以调用这个来自Atlas pageLoad()方法的addDropZoneBehavior函数（就象你在前面的示例中操作addFloatingBehavior函数一样）。这样可以把正确的行为依附到它们各自的HTML元素并且复制上面你使用声明性标记所创建的拖放和dropzone功能。如果你想使此能够动态工作，那么你只要添加你为上一个示例编写的createDraggableDiv()函数即可。作为一种参考，下面是创建可编程dropzone的完整代码：

＜%@ 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 id="Head1" runat="server"＞ ＜title＞Imperative Drop Targets＜/title＞ ＜script type="text/javascript"＞ 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(); } function addDropZoneBehavior(ctrl){ 　var dropZone = new Sys.UI.Control(ctrl); 　var dropZoneBehavior = new Custom.UI.DropZoneBehavior(); 　dropZone.get_behaviors().add(dropZoneBehavior); 　dropZoneBehavior.initialize(); } function pageLoad(){ 　addDropZoneBehavior($('dropZone')); 　addFloatingBehavior($('draggableDiv')，$('handleBar')); } ＜/script＞ ＜/head＞ ＜body＞ ＜form id="form1" runat="server"＞ 　＜atlas:ScriptManager ID="ScriptManager1" runat="server"＞ 　　＜Scripts＞ 　　　＜atlas:ScriptReference ScriptName="AtlasUIDragDrop" /＞ 　　　＜atlas:ScriptReference Path="scriptLibrary/DropZoneBehavior.js" /＞ 　　＜/Scripts＞ 　＜/atlas:ScriptManager＞ ＜h2＞Imperative Drop Targets with javacript＜/h2＞ ＜div style="background-color:Red;height:200px;width:200px;"＞ ＜div id="draggableDiv" style="height:100px;width:100px;background-color:Blue;"＞ ＜div id="handleBar" style="height:20px;width:auto;background-color:Green;"＞ ＜/div＞ ＜/div＞ ＜/div＞ ＜div id="dropZone" style="background-color:cornflowerblue; height:200px;width:200px;"＞Drop Zone＜/div＞ ＜/form＞ ＜/body＞ ＜/html＞

　　除了dropzone行为以外，你可能还想写你自己的漂浮行为。例如，默认地，带有漂浮行为的元素只是简单地停留在你放下它们的位置。然而，你可能想扩展这一特征以便你的漂浮div会"退回"到它原来的位置-当你把它放到一个投放区外的时候。另外，当你拖动它时，你可能想改变被拖放的元素看上去的样子，或使它透明，或改变它的颜色，或全部替换原来的拖动图像。所有这些都可以通过创建实现IDragSource接口的一种行为来实现，这与你创建一个实现IDropTarget接口的定制类是思路一样。

　　七. 总结

　　本文应该为你扩展Atlas提供的基本拖放功能来创建你自己的行为和功能提供了一个起点。而且，你可以基于此创建控件；还可以在此基础上继续创建使用声明性标记实现你的行为的Atlas扩展控件，或创建使用Atlas行为自动创建HTML元素的服务器端控件。这样以来，你就可以进一步创建高级服务器端控件-或者是静态的声明性的，或者是强制性的，却更复杂些但也更灵活。当然，这是一个超出本文题目的问题。不过，我希望，此后有人会尝试服务器端Atlas编程，正象本文所作的客户端Atlas脚本编程尝试一样。

查看本文来源