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

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

主要内容

1DragOverlayExtender介绍

2.完整示例

3.使用ProfileScriptService控件

 

一.DragOverlayExtender介绍

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来配置相关的拖放控件,它的属性如下:

属性

解释

TargetControlID

需要拖放控件的ID

TargetControlID="floatingLabel"

ProfileProperty

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

ProfileProperty="FloatingLabelLocation"

Enabled

是否可用

Enabled="true | false"

二.完整的示例

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

<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来配置相关的控件,注意这步不能通过可视化的方式来实现,只能手工输入代码,设置TargetControlIDfloatingLabel

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

    
<atlas:DragOverlayProperties TargetControlID="floatingLabel" 

        Enabled
="true" />

</atlas:DragOverlayExtender>

完成后完整的代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

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

    
<title>DragOverlay Extender Example</title>

    
<style type="text/css">

        body
{font-family:Verdana;}

        .label
{font-weight:bold;border:solid 1px Green;position: absolute}

        .dropZone
{height:200px;border:solid 1px Red;background:#efefef;}

    
</style>

</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>

运行效果如下:

拖放:

三.使用ProfileScriptService控件

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

<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

作者:TerryLee
出处:http://terrylee.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
posted @ 2006-07-30 10:53 TerryLee 阅读(4756) 评论(34)  编辑 收藏 网摘 所属分类: [08]  Web开发[01]  .NET大本营

  回复  引用    
#1楼 2006-07-30 12:17 | yuchen [未注册用户]
谢谢老师,这几天辛苦了!
  回复  引用  查看    
#2楼 [楼主]2006-07-30 12:52 | TerryLee      
@yuchen
呵呵,别客气,共同交流:-)



  回复  引用    
#3楼 2006-07-30 17:41 | 随风.Net [未注册用户]
安装已停止,原因是 ProjectType 值的目录不存在。对于您所安装的 Visual Studio,该项目类型无效。

我在安装ATLAS时出现的 知道什么原因不?
  回复  引用  查看    
#4楼 [楼主]2006-07-30 17:53 | TerryLee      
@随风.Net
你安装了Visual Studio 2005了吗?
  回复  引用    
#5楼 2006-07-30 20:02 | 随风.Net [未注册用户]
@TerryLee
汗 你都能这么回答 ^^

你给的Sample 我都是通过引用来调试的
不过都成功了哦 象你学习了很多哦
期待灰屏效果哦 辛苦你了哦~~~

  回复  引用  查看    
#6楼 [楼主]2006-07-31 07:58 | TerryLee      
@随风.Net
呵呵,看你上面给出的错误信息

我以为是VS版本不对呢^_^
  回复  引用  查看    
#7楼 2006-07-31 08:47 | overred      
学习ing

  回复  引用    
#8楼 2006-07-31 11:00 | 东风之神 [未注册用户]
对Altas的拖动感觉老不爽
  回复  引用    
#9楼 2006-07-31 11:03 | 东风之神 [未注册用户]
自己实现了一个拖动控件
交流msn:free1z@hotmail.com
QQ:34632092
群聊:4050558,这个群里头都是老鸟了,都在一起聊.net 聊了两年了。各方面的人才都有群现有人数87人
  回复  引用  查看    
#10楼 [楼主]2006-07-31 11:41 | TerryLee      
@东风之神
Atlas的拖动不爽?能具体说说吗?

BTW:Atlas而非Altas
  回复  引用    
#11楼 2006-07-31 17:51 | Simons [未注册用户]
我按照你的方法做了 但是有以下错误 请指点一下

能拖动,但是拖动幅度稍稍大或者不别的原因 那个拖动层又回到原来的地方了
  回复  引用  查看    
#12楼 2006-07-31 19:42 | 阿一      
楼主,建个Atlas开发群好不好!
  回复  引用  查看    
#13楼 [楼主]2006-08-01 08:21 | TerryLee      
@Simons

我这里没这个问题啊?

你给Body元素加上height:100% CSS样式,再试试。
  回复  引用  查看    
#14楼 [楼主]2006-08-01 08:23 | TerryLee      
@阿一
我很少用QQ,现在还没有到太阳级别,不能创建QQ群啊-_-

你可以创建一个,我加入,呵呵

或者我创建一个MSN聊天群?
  回复  引用  查看    
#15楼 2006-08-05 19:50 | main      
问题解决了,原来这些控件都必须在<form></form>之间。

  回复  引用  查看    
#16楼 [楼主]2006-08-06 09:57 | TerryLee      
@main
晕-_-
  回复  引用  查看    
#17楼 2006-08-06 10:45 | main      
@TerryLee
大哥不要笑啊,我把控件托放上去后,就没有发现这个问题。当然也许我太笨了:(
也许form域就是拖放的边界。
  回复  引用    
#18楼 2006-08-10 15:21 | 502375715 [未注册用户]
这想知道..如查配合profile时..我将拖放控件关闭后.下次打开时还会不会出现.
  回复  引用  查看    
#19楼 [楼主]2006-08-10 17:31 | TerryLee      
@502375715
应该是不会,这个没有做过试验
  回复  引用    
#20楼 2006-08-16 14:50 | 孤叶 [未注册用户]
QQ群:18788422
希望大家加入,好好交流,也希望楼主有空也来看看,谢谢
此群为Altas而群,更为你这一系列文章而建
  回复  引用  查看    
#21楼 2006-08-20 20:41 | spiderNet      
@随风.Net
如果先安装了ToolKit Extender就会出现这种现象。我也遇到过,没找到好办法,重装VS了
  回复  引用    
#22楼 2006-09-06 11:42 | 大漠孤煙 [未注册用户]
樓主:如果我在一頁面里面要實現多個可拖放的塊,為什么他們會重疊在一起,如何解決這個問題,謝謝啦!!!
  回复  引用  查看    
#23楼 [楼主]2006-09-06 17:05 | TerryLee      
@大漠孤煙
用CSS样式控制,怎么会重叠在一起呢?
  回复  引用    
#24楼 2006-09-07 11:24 | viptell [未注册用户]
ProfileScriptService
为什么设置好了没有用啊!
profile有什么作用?
  回复  引用  查看    
#25楼 [楼主]2006-09-07 17:24 | TerryLee      
@viptell
看Web.config中有没有配置
另外可以参考Dfyling的相关文章
  回复  引用    
#26楼 2006-09-08 12:11 | linx [未注册用户]
如果网站会自动在App_data下产生ASPNETDB.MDF数据库,记录FloatingLabelLocation。如果我另外有sql server服务器,怎么把profile指定到这个数据库?

  回复  引用    
#27楼 2006-09-11 22:11 | dzhx1979 [未注册用户]
为什么label只能拖不能放,找不到问题
  回复  引用  查看    
#28楼 [楼主]2006-09-12 08:53 | TerryLee      
@dzhx1979
只能拖不能放?什么意思?

我在文中的示例使用的就是Label控件
  回复  引用    
#29楼 2006-09-12 09:34 | zibu[匿名] [未注册用户]
@dzhx1979
我想问题应该是你没有指定放置label标签的div的宽和高,只要拖动的位置没有超过div的范围,那么你放(松开鼠标)的时候自然不会回到原先的位置
  回复  引用    
#30楼 2006-09-12 09:36 | zibu[匿名] [未注册用户]
如果我想拖放页面上的多个控件,虽说只需要添加一个ProfileScriptService,但必须添加多个DragOverlayExtender了?有没有其他办法
  回复  引用    
#31楼 2006-09-12 19:31 | dzhx1979 [未注册用户]
@zibu[匿名]
多谢建议,问题已经解决

  回复  引用  查看    
#32楼 2006-12-04 15:54 | 金哈      
利用DragOverlayExtender操作拖放时,如何显式指定拖放区域?
像您上面讲的,是不是Label1只能在包含它的DIV中拖放?
<div class="dropZone">
<asp:Label ID="Label1" runat="server" CssClass="label">Please DragMe around</asp:Label>
</div>
  回复  引用    
#33楼 2007-01-09 17:46 | foot[匿名] [未注册用户]
www.3721.com 上的效果能用Atlas实现吗?????
  回复  引用    
#34楼 2007-01-17 00:38 | snyod [未注册用户]
代表党(.NET平台)感谢您.
全部收藏.....................




标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2006-08-15 08:06 编辑过
Google站内搜索

相关文章:

相关链接: