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

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

主要内容

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>

运行后如下：

拖动后：

完整示例下载