Atlas学习手记（22）：使用行为增强用户界面（二）：Floating Behavior

---

　本文示例源代码或素材下载

　　主要内容

　　1．Floating Behavior简介

　　2．完整示例

　　一．Floating Behavior简介

　　前面在AtlasControlToolkit中说过，DragPanel封装了Sys.UI.FloatingBehavior，我们已经知道了如何使用服务器端的Extender来实现拖动效果，本文介绍一下直接使用FloatingBehavior来实现Drag&Drop效果。

　　FloatingBehavior的实现是在Atlas的脚本库AtlasUIDragDrop中，所以在使用时需要引用该脚本库，简单的FloatingBehavior的定义如下：

<control id="DescriptionDrag" cssClass="floatwindow">
　　　　<behaviors>
　　　　　　<floatingBehavior handle="DescriptionDrag">
　　　　　　</floatingBehavior>
　　　　</behaviors>
</control>

　　二．完整示例

　　看一个完整的示例，新建Atlas Web Site后，在ScriptManager中需要引入AtlasUIDragDrop脚本库，这一点要切记。

<atlas:ScriptManager runat="server" ID="ScriptManager1">
　　<Scripts>
　　　　<atlas:ScriptReference ScriptName="AtlasUIDragDrop" />
　　</Scripts>
</atlas:ScriptManager>

　　在ASPX页面中添加要拖动的面板，用Div来实现：

<div>
　　<h3 style="text-decoration: underline">
　　　　Floating Behavior Example</h3>
　　<div id="DescriptionDrag" style="width: 200px; height: 200px;">
　　　　<div id="Handle" class="draghandle">
　　　　　　Drag by clicking on this element</div>
　　　　<div style="text-align: center; font-weight: bold;">
　　　　　　Word (n)</div>
　　　　A sound or a combination of sounds.
　　</div>
　　<div style="width: 200px; height: 200px;">
　　</div>
</div>

　　用到的相关CSS样式如下：

<style type="text/css">
　　　　.draghandle {}{
　　　　BORDER-RIGHT: black 1px solid;
　　　　BORDER-TOP: black 1px solid;
　　　　FONT-WEIGHT: bold; FONT-SIZE: 12pt;
　　　　BORDER-LEFT: black 1px solid;
　　　　WIDTH: 100%; CURSOR: move;
　　　　COLOR: black; BORDER-BOTTOM:
　　　　black 1px solid;
　　　　BACKGROUND-COLOR: #0000dd;
　　　　TEXT-ALIGN: center
　　}
　　.floatwindow {}{
　　　　BORDER-RIGHT: black 1px solid;
　　　　PADDING-RIGHT: 4px;
　　　　BORDER-TOP: black 1px solid;
　　　　PADDING-LEFT: 4px; FONT-SIZE: 14pt;
　　　　PADDING-BOTTOM: 4px;
　　　　BORDER-LEFT: black 1px solid;
　　　　PADDING-TOP: 4px;
　　　　BORDER-BOTTOM: black 1px solid;
　　　　BACKGROUND-COLOR: #eeeeee
　　}
</style>

　　添加Atlas脚本如下，在FloatingBehavior中通过handle指定要拖动的面板ID：

<script type="text/xml-script">
　　<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
　　　　<components>
　　　　<control id="DescriptionDrag" cssClass="floatwindow">
　　　　　　　　<behaviors>
　　　　　　　　　　<floatingBehavior handle="DescriptionDrag">
　　　　　　　　　　</floatingBehavior>
　　　　　　　　</behaviors>
　　　　</control>
　　　　</components>
　　</page>
</script>

　　运行后如下：

　　拖动后：

本文作者:

---

« 
» 

---