您的位置：首页 > 编程语言 > Go语言

Atlas学习手记（7）：使用DragOverlayExtender实现拖放功能

2006-08-07 15:15 671 查看

DragOverlayExtender允许我们对任何控件添加类似于Drag-and-Drop Behaviors那样的拖放（Drag-and-Drop）功能，更重要的是如果要对已经存在的控件添加，我们不需要对原有控件做任何的改动，只需添加一个DragOverlayExtender就可以轻松实现。

主要内容[/b]

1．DragOverlayExtender介绍

2．完整示例

3．使用ProfileScriptService控件

一．DragOverlayExtender介绍[/b]

DragOverlayExtender允许我们对任何控件添加类似于Drag-and-Drop Behaviors那样的拖放（Drag-and-Drop）功能。更重要的是如果想对已经存在的控件添加，我们不需要对原有控件做任何的改动，只要添加一个DragOverlayExtender就可以轻松实现。DragOverlayExtender示例代码：

<atlas:DragOverlayExtender ID="doe1" runat="server">

<atlas:DragOverlayProperties TargetControlID="floatingLabel" ProfileProperty="FloatingLabelLocation"

Enabled="true" />

</atlas:DragOverlayExtender>
需要为DragOverlayExtender添加DragOverlayProperties来配置相关的拖放控件，它的属性如下：

属性[/b]	解释[/b]
TargetControlID	需要拖放控件的ID TargetControlID="floatingLabel"
ProfileProperty	保存Profile，与ProfileScriptService控件结合使用 ProfileProperty="FloatingLabelLocation"
Enabled	是否可用 Enabled="true \| false"

二．完整的示例[/b]

现在来看一个简单的拖放的例子，在这之前还是添加一个ScriptManager控件，这里并不需要设置EnablePartialRendering为true。

<atlas:ScriptManager ID="scriptManager" runat="server">

</atlas:ScriptManager>
然后添加拖放区域，这里我们为一个Label控件添加拖放效果：

<div class="dropZone">

<asp:Label ID="floatingLabel" runat="server" CssClass="label">Please DragMe around</asp:Label>

</div>
现在添加DragOverlayExtender控件：

<atlas:DragOverlayExtender ID="doe1" runat="server">

</atlas:DragOverlayExtender>
再添加DragOverlayProperties来配置相关的控件，注意这步不能通过可视化的方式来实现，只能手工输入代码，设置TargetControlID为floatingLabel

<atlas:DragOverlayExtender ID="doe1" runat="server">

<atlas:DragOverlayProperties TargetControlID="floatingLabel"

Enabled="true" />

</atlas:DragOverlayExtender>
完成后完整的代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title>DragOverlay Extender Example</title>

</head>

<atlas:ScriptManager ID="scriptManager" runat="server">

</atlas:ScriptManager>

<body>

<form id="form1" runat="server">

<div class="dropZone">

<asp:Label ID="floatingLabel" runat="server" CssClass="label">Please DragMe around</asp:Label>

</div>

<atlas:DragOverlayExtender ID="doe1" runat="server">

<atlas:DragOverlayProperties TargetControlID="floatingLabel"

Enabled="true" />

</atlas:DragOverlayExtender>

</form>

</body>

</html>
运行效果如下：

<atlas:ProfileScriptService ID="profile1" runat="server" AutoSave="true">

</atlas:ProfileScriptService>
修改DragOverlayExtender为如下代码：

<atlas:DragOverlayExtender ID="doe1" runat="server">

<atlas:DragOverlayProperties TargetControlID="floatingLabel" ProfileProperty="FloatingLabelLocation"

Enabled="true" />

</atlas:DragOverlayExtender>
在Web.config文件中启用Profile：

<profileService enabled="true" setProperties="FloatingLabelLocation" getProperties="FloatingLabelLocation" />
并且要在<system.web>配置节中添加：

<profile defaultProvider="AspNetSqlProfileProvider">

<properties>

<add name="FloatingLabelLocation" />

</properties>

</profile>
至此配置就完成了，感兴趣的朋友可以自己动手试验一下。

好了，关于DragOverlayExtender控件就到这里了，不过对于DragOverlayExtender来说好像不能限制拖放的区域，也许在Drag-and-Drop Behaviors中可以，慢慢再研究吧。

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

come from :http://www.cnblogs.com/Terrylee/archive/2006/07/30/Atlas_DragOverlayExtender.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航