星空网 > 软件开发 > ajax

Atlas学习手记(7):使用DragOverlayExtender实现拖放功能

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

主要内容

1.DragOverlayExtender介绍

2.完整示例

3.使用ProfileScriptService控件

 

一.DragOverlayExtender介绍

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

Atlas学习手记(7):使用DragOverlayExtender实现拖放功能<atlas:DragOverlayExtender ID="doe1" runat="server">
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能    <atlas:DragOverlayProperties TargetControlID="floatingLabel" ProfileProperty="FloatingLabelLocation"
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能        Enabled="true" />
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能</atlas:DragOverlayExtender>

需要为DragOverlayExtender添加DragOverlayProperties来配置相关的拖放控件,它的属性如下:

属性

解释

TargetControlID

需要拖放控件的ID

TargetControlID="floatingLabel"

ProfileProperty

保存Profile,与ProfileScriptService控件结合使用

ProfileProperty="FloatingLabelLocation"

Enabled

是否可用

Enabled="true | false"

二.完整的示例

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

Atlas学习手记(7):使用DragOverlayExtender实现拖放功能<atlas:ScriptManager ID="scriptManager" runat="server">
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能</atlas:ScriptManager>

然后添加拖放区域,这里我们为一个Label控件添加拖放效果:

Atlas学习手记(7):使用DragOverlayExtender实现拖放功能<div class="dropZone">
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能    <asp:Label ID="floatingLabel" runat="server" CssClass="label">Please DragMe around</asp:Label>
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能</div>

现在添加DragOverlayExtender控件:

Atlas学习手记(7):使用DragOverlayExtender实现拖放功能<atlas:DragOverlayExtender ID="doe1" runat="server">
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能</atlas:DragOverlayExtender>

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

Atlas学习手记(7):使用DragOverlayExtender实现拖放功能<atlas:DragOverlayExtender ID="doe1" runat="server">
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能    <atlas:DragOverlayProperties TargetControlID="floatingLabel" 
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能        Enabled="true" />
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能</atlas:DragOverlayExtender>

完成后完整的代码如下:

Atlas学习手记(7):使用DragOverlayExtender实现拖放功能Atlas学习手记(7):使用DragOverlayExtender实现拖放功能<%Atlas学习手记(7):使用DragOverlayExtender实现拖放功能@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能<html ="http://www.w3.org/1999/xhtml">
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能<head id="Head1" runat="server">
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能    <title>DragOverlay Extender Example</title>
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能Atlas学习手记(7):使用DragOverlayExtender实现拖放功能    <style type="text/css">Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能Atlas学习手记(7):使用DragOverlayExtender实现拖放功能        body{Atlas学习手记(7):使用DragOverlayExtender实现拖放功能}{font-family:Verdana;}
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能Atlas学习手记(7):使用DragOverlayExtender实现拖放功能        .label{Atlas学习手记(7):使用DragOverlayExtender实现拖放功能}{font-weight:bold;border:solid 1px Green;position: absolute}
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能Atlas学习手记(7):使用DragOverlayExtender实现拖放功能        .dropZone{Atlas学习手记(7):使用DragOverlayExtender实现拖放功能}{height:200px;border:solid 1px Red;background:#efefef;}
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能    </style>
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能</head>
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能<atlas:ScriptManager ID="scriptManager" runat="server">
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能</atlas:ScriptManager>
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能<body>
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能    <form id="form1" runat="server">
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能        <div class="dropZone">
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能            <asp:Label ID="floatingLabel" runat="server" CssClass="label">Please DragMe around</asp:Label>
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能        </div>
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能        <atlas:DragOverlayExtender ID="doe1" runat="server">
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能            <atlas:DragOverlayProperties TargetControlID="floatingLabel" 
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能                Enabled="true" />
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能        </atlas:DragOverlayExtender>
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能    </form>
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能</body>
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能</html>

运行效果如下:

Atlas学习手记(7):使用DragOverlayExtender实现拖放功能

拖放:

Atlas学习手记(7):使用DragOverlayExtender实现拖放功能

三.使用ProfileScriptService控件

ASP.NET2.0提供了内置的Profile的支持,Atlas提供了一个ProfileScriptService控件可以使用我们轻松的使用Profile,如果要对前面例子中的拖放实现Profile,首先添加一个ProfileScriptService控件,可以设置是否自动保存:

Atlas学习手记(7):使用DragOverlayExtender实现拖放功能<atlas:ProfileScriptService ID="profile1" runat="server" AutoSave="true">
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能</atlas:ProfileScriptService>

修改DragOverlayExtender为如下代码:

Atlas学习手记(7):使用DragOverlayExtender实现拖放功能<atlas:DragOverlayExtender ID="doe1" runat="server">
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能    <atlas:DragOverlayProperties TargetControlID="floatingLabel" ProfileProperty="FloatingLabelLocation"
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能        Enabled="true" />
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能</atlas:DragOverlayExtender>

在Web.config文件中启用Profile:

Atlas学习手记(7):使用DragOverlayExtender实现拖放功能<profileService enabled="true" setProperties="FloatingLabelLocation" getProperties="FloatingLabelLocation" />

并且要在<system.web>配置节中添加:

Atlas学习手记(7):使用DragOverlayExtender实现拖放功能<profile  defaultProvider="AspNetSqlProfileProvider">
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能  <properties>
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能    <add name="FloatingLabelLocation" />
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能  </properties>
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能
Atlas学习手记(7):使用DragOverlayExtender实现拖放功能</profile>

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

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

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

原标题:Atlas学习手记(7):使用DragOverlayExtender实现拖放功能

关键词:atlas

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

Newegg国际商城的物流方式_Newegg国际商城的物流服务:https://www.goluckyvip.com/news/10862.html
Noon进军食品配送市场惨遭嫌弃?!降低佣金不被市场看好:https://www.goluckyvip.com/news/10863.html
整合五国站点,TikTok Shop开启东南亚大促! :https://www.goluckyvip.com/news/10864.html
客户案例 | 中国至英国木质材料出口铁路运输 :https://www.goluckyvip.com/news/10865.html
亚马逊卖断货!“粉红幽灵毛毯”被TikTok带爆:https://www.goluckyvip.com/news/10866.html
TikTok本土MCN机构申请资料 :https://www.goluckyvip.com/news/10867.html
皇帝的皇宫=:https://www.vstour.cn/a/363188.html
海南岛琼海市旅游景点 琼海市的旅游景点:https://www.vstour.cn/a/363189.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流