随笔-312  评论-11907  文章-2  trackbacks-224

English Version: http://dflying.dflying.net/1/archive/77_atlas_drag__drop_overview.html
中文版:http://dflying.cnblogs.com/archive/2006/04/21/381763.html
请同时参考:使用ASP.NET Atlas实现拖放(Drag & Drop)效果(下)

题外话

This English Version is posted by me at my English blog http://dflying.dflying.net  for more that two months. So some of the features may be out of date now, such as the old Web Namespace and the demo code. I may update it in the coming days but at this moment for English readers, please just be a little patient.

这篇文章的英文版两个多月前发布在我的英文Bloghttp://dflying.dflying.net上。所以现在其中的有些内容已经过时了,例如曾经的“Web”命名控件以及附带的示例程序。我会找时间更新一下,但目前对于英文读者,还请略微耐心一些。

本文曾被吴飞(Felix)翻译成中文,在此表示感谢!他(她)的版本请见:http://www.felixwoo.com/article.asp?id=171

正文

ASP.NET Atlas提供了一个简单易用而又强大的跨浏览器的拖放功能的实现。Atlas的拖放功能实现位于AtlasUIDragDrop.js文件中,感兴趣的朋友可以学习一下它的实现,当然,这部分内容不在本文的范围之内(今后应该会有所介绍,希望我不会懒)。

基本上,Atlas中可拖放的UI由如下两个部分实现:

  1. 可拖动的对象以及投放目标对象。可拖动的对象就是在页面中可以被鼠标移动的DOM元素(例如网上商城中的物品),而投放目标对象则是页面中可以接收可拖动对象的,作为容器的DOM元素(例如网上商城中的购物车)。Atlas允许您通过实现IDragSource接口来定义自己的可拖动对象,实现IDropTarget接口来定义自己的投放目标对象。当然您可以同时实现上述两个接口(比如,您希望用户可以在页面上自由拖动并安排购物车的位置)。
  2. 一个DragDropManager对象DragDropManager是一个全局对象,将在运行时被自动初始化(当然,您需要在ScriptManager中显示声明引用AtlasUIDragDrop脚本)。您可以使用Sys.UI.DragDropManager访问到它。它的主要功能是通过调用IDragSource以及IDropTarget接口提供的方法来启动拖放操作以及注册投放目标对象。通常情况下,您不需要考虑太多关于DragDropManager的事情。

这样,通常情况下使用Atlas创建可拖放的UI有如下两个步骤:

  1. 通过实现IDragSource接口来创建可拖动的对象,实现IDragSource接口的对象应该负责调用DragDropManagerstartDragDrop()方法以开始拖动的操作(通常这个步骤应该放在处理mouse down事件中实现)。每个可拖动的对象都有自己的dataType属性,可以用来定义相同类型拖放对象。
  2. 通过实现IDropTarget接口来创建投放目标对象,实现IDropTarget接口的对象应该在DragDropManager中调用registerDropTarget()注册自己。每个投放目标对象都有自己的acceptedDataTypes属性,用来指定该投放目标对象可以接受何种dataType属性的可拖动对象。

总体上,拖放操作开始于一个可拖动对象调用DragDropManagerstartDragDrop()方法,然后,DragDropManager接管了其它的操作,它将负责调用可拖动对象的IDragSource接口方法以及投放目标对象的IDropTarget接口方法来协调二者的关系,以及相应的UI变化。

Atlas提供了一些内建的实现了IDragSource以及IDropTarget接口的Behavior(关于Behavior,请参考:在ASP.NET Atlas中创建自定义的Behavior)供我们使用。显然,下列客户端Behavior都实现了IDragSourceIDropTarget接口中的至少一个。

  1. DragDropList Behavior可以为一组控件增加拖放功能。典型应用就是使ListView控件(关于ListView,请参考:使用ASP.NET Atlas ListView控件显示列表数据实现拖放功能。
  2. DraggableListItem Behavior可以在一个DragDropList中定义一个拖动对象。可以应用在ListViewItemTemplate上,使列表中的每一项都可以拖动。
  3. DataSourceDropTarget Behavior用来把数据通过拖放的方式加入到DataSource控件(关于DataSource,请参考:Atlas命名空间Sys.Data下控件介绍——DataSource和XMLDataSource)中。
  4. FloatingBehavior Behavior可以使某个控件浮动在页面上,并可随意移动。

在下篇中我将通过一个示例程序来演示拖放(Drag & Drop)效果的实现:使用ASP.NET Atlas实现拖放(Drag & Drop)效果(下)

posted on 2006-04-21 22:13 Dflying Chen 阅读(6486) 评论(13)  编辑 收藏 网摘 所属分类: ASP.NET AJAX (Atlas)

评论:
#1楼  2006-04-21 23:56 | 维生素C.NET      
如果要实现像pageflakes的效果,拖放时会有一个目标区域(相同大小的div填充目标位置),拖放后记录位置,供personalization使用(使用atlas支持的Profile).是不是这样就是实现msn spaces的那种类似webpart的控件的那种拖放效果呢?不知道我的思路是否正确.
  回复  引用  查看    
#2楼  2006-04-22 05:48 | dagfea [未注册用户]
呵呵,仔细分析一下还是很有道理的



  回复  引用    
#3楼 [楼主] 2006-04-22 08:40 | Dflying Chen      
@维生素C.NET
关于Atlas的Profile,会在未来有所说明。
  回复  引用  查看    
#4楼 [楼主] 2006-04-22 08:41 | Dflying Chen      
@dagfea
慢慢来,慢慢分析,呵呵。
  回复  引用  查看    
#5楼  2006-04-23 00:42 | 夏林 [未注册用户]
谢谢。

正在找这个代码


谢谢老爷
  回复  引用    
#6楼 [楼主] 2006-04-23 06:48 | Dflying Chen      
@夏林
代码今天会给出来。
  回复  引用  查看    
#7楼  2007-03-26 12:55 | spring [未注册用户]
使用ASP.NET Atlas实现拖放(Drag & Drop)效果(下) 这个链接打不开。
  回复  引用    
#8楼 [楼主] 2007-03-26 14:28 | Dflying Chen      
#10楼  2007-11-10 06:17 | Richard .NET [未注册用户]
那那位知道atlas 里面拖动事件和放开事件是什么呢 指点
  回复  引用    

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2007-03-26 14:29 编辑过
"五向定位"职业成长路线公开课(上海、南京、大连)
Google站内搜索


相关链接: