| |
ASP.NET 2.0+Atlas编写鼠标拖放程序 |
|
时间: 2006-09-15 来自：天极网 |
 |
|
六. 强制性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脚本编程尝试一样。
|
|
|
|
|
|
|
|
