ASP.NET 2.0+Atlas编写鼠标拖放程序(4)

http://www.sina.com.cn 2006年09月14日 09:01 天极yesky

　　六. 强制性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脚本编程尝试一样。

[上一页]　[1]　[2]　[3]　[4]

本文导航:
·ASP.NET 2.0+Atlas编写鼠标拖放程序 ·ASP.NET 2.0+Atlas编写鼠标拖放程序(2)		·ASP.NET 2.0+Atlas编写鼠标拖放程序(3) ·ASP.NET 2.0+Atlas编写鼠标拖放程序(4)