FloatingBehavior补遗：Location属性与move事件

　　FloatingBehavior在官方文档中的例子似乎只有对其最简单使用方式的介绍，却没有对其Location属性和move事件的说明。虽然它们非常简单，我想可能还是需要了解一下的。FloatingBehavior的Class Library在本人前面的文章《补充部分官方文档里没有的Client Library以及代码提示Schema更新》中有说明。我们从一个简单的例子来看这两个成员：

首先，我们定义一些CSS类：

<style>
    body { font-family: Arial; font-size: 12px; }
    #handle { background-color: #EEEEEE; }
    #floatDiv { width: 100px; border: solid 1px black; height: 100px;}
    .red {color: red;}
</style>

注意在使用FloatingBehavior时需要引入AtlasUIDragDrop这个Framework Script：

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

然后是所需的HTML元素：

<div style="height:300px; border:solid 1px black;">
    <div id="location">Drop to change color.</div>
    <div id="floatDiv">
        <div id="handle">Handle</div>
        <div>blablabla</div>
    </div>
</div>

其中最外层的高300px的容器，这个是拖动的有效区域。只有在页面范围内的拖动才会有效，这也就是为什么有朋友会遇到在自己的例子中拖动后会回到原处的情况，这是因为简单的例子页面区域就是很小的一块，所以被拖动的元素无法停留。

接下来就是最重要的Atlas Script了：

<script type="text/xml-script">
    <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
        <components>
            <label id="location">
                <bindings>
                    <binding dataContext="floating" dataPath="location" property="text" />
                </bindings>
            </label>
            <control id="floatDiv">
                <behaviors>
                    <floatingBehavior id="floating" handle="handle" location="100, 50">
                        <move>
                            <invokeMethod target="location" method="toggleCssClass">
                                <parameters className="red" />
                            </invokeMethod>
                        </move>
                    </floatingBehavior>
                </behaviors>
            </control>
        </components>
    </page>
</script>

FloatingBehavior的move事件会在浮动元素落在有效范围内（上面的例子里则是最外层高300px的div）触发，触发时id为location的div的前景色会在红与白之间切换。而FloatingBehavior的Location属性以字符串“x, y”形式设定了浮动元素的坐标，在set_Location内部Behavior会调用Sys.UI.Control.setLocation“静态”方法来设置浮动元素的位置。自然，我们能通过binding来访问这个属性，可以看到在id为location的div里会根据当前behavior的location当前值而改变。如果将浮动元素拖动至有效范围外的话，那么它就会回到原处，move事件也不会触发。

很自然，move事件除了使用Xml Element形式调用Action之外，也能以填写Xml Attribute来调用javascript方法。先修改上面一行Atlas Script代码以Xml Attribute方法调用comfirmDrop函数：

<floatingBehavior id="floating" handle="handle" location="100, 50" move="confirmDrop">
    ...
</floatingBehavior>

再增加一个javascript函数：

<script language="javascript">
    function confirmDrop(sender, args)
    {
        var msg = "Do you really want to drop the control at " + sender.get_location() + "?";
        if (!confirm(msg))
        {
            args.set_canceled(true);
        }
    }
</script>

在这里，sender就是那个当前的FloatingBehavior对象，而args就是大名鼎鼎的Sys.CancelEventArgs！因此我们能够相当方便的使用args.set_canceled(true)来取消这次移动。在示范中也可以很方便的看出，如果用户在Confirm Dialog中选择了“Cancel”，那么漂浮的控件就会回到原处。

这个就是对FloatingBehavior的Location属性和move事件的介绍，可以看出，有了binding，Declarative Syntax本身又是多么的优雅。有了Atlas，编写javascript代码有多么的轻松。

本文所用例子的源代码，可以点击这里下载。如果您希望查看效果，请点击这里。