Atlas学习手记(22):使用行为增强用户界面(二):FloatingBehavior

前面在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的定义如下：        <behaviors>            <floatingBehavior handle="DescriptionDrag">            </floatingBehavior>        </behaviors></control>

二．完整示例    <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/>    <page ="http://schemas.microsoft.com/">        <components>        <control id="DescriptionDrag" cssClass="floatwindow">                <behaviors>                    <floatingBehavior handle="DescriptionDrag">                    </floatingBehavior>                </behaviors>        </control>        </components>    </page></script>

运行后如下：

拖动后：

完整示例下载：http://files.cnblogs.com/Terrylee/FloatingBehaviorDemo.rar

作者：TerryLee
出处：http://terrylee.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：Atlas学习手记(22):使用行为增强用户界面(二):FloatingBehavior

关键词：atlas