史志网站建设,在线网站建设工程标准,产品开发流程梳理,管理咨询公司口号在Ajax程序中实现传统桌面程序中异常简单的拖放功能却并不是件容易的事情。然而Web上的拖放功能又如此的让人痴迷#xff0c;所以几乎每个成熟的Ajax类库都提供了自己的一套实现拖放的封装#xff0c;ASP.NET AJAX (Atlas) 自然也不例外。本文将总结并简要分析ASP.NET AJAX (…在Ajax程序中实现传统桌面程序中异常简单的拖放功能却并不是件容易的事情。然而Web上的拖放功能又如此的让人痴迷所以几乎每个成熟的Ajax类库都提供了自己的一套实现拖放的封装ASP.NET AJAX (Atlas) 自然也不例外。本文将总结并简要分析ASP.NET AJAX (Atlas) 中拖放功能的6种不同的实现方法希望能够帮助朋友们选出最适合实际需求的方法。 其中第1到第4种方案在我的《ASP.NET Ajax程序设计——第I卷服务器端ASP.NET 2.0 AJAX Extensions与ASP.NET AJAX Control Toolkit》一书中有详细介绍4月出版本文中的代码和图示也节选自该书。第5第6种方案在我的《ASP.NET 2.0 Ajax程序设计——第II卷客户端Microsoft AJAX Library》一书中将有详细介绍暂定7月出版。 不过纵观这些解决方案我很遗憾的发现要么是使用简单可定制能力差要么就是可定制能力强但使用起来要写很多代码。希望ASP.NET AJAX (Atlas) 团队能够再接再厉努力把这个重要功能做得更好。或者我有哪种方法漏掉了也请朋友们帮忙补充一下。 [1] 使用服务器端DragOverlayExtender或客户端DragOverlayBehavior 服务器端的DragOverlayExtender就是靠着客户端DragOverlayBehavior而实现的前者是后者在服务器端的组件化封装所以我们将二者放在一起讨论。 这个“拖放”功能很简单其实这只是个“拖拽”而没有“投放”。也就是说你可以随意将某个Panel在页面中拖来拖去不过却没有什么固定的地方可以“投放”就像在Windows桌面上拖放某个窗口的位置一样——其实用处不大也没有提供什么可定制能力。但它使用起来非常简单也支持将Panel的位置保存在Profile中。 下面是一段DragOverlayExtender的示例代码至于DragOverlayBehavior的用法请查看DragOverlayExtender页面生成的HTML代码 asp:Login IDfloatLogin BackColorwhite BorderStyleSolid BorderColorblack runatserver/asp:Loginasp:DragOverlayExtender IDDragOverlayExtender2 Enabledtrue TargetControlIDfloatLogin runatserver / 效果如下 [2] 使用服务器端DragPanel DragPanel是ASP.NET AJAX Control Toolkit中的一个扩展器控件。其功能基本与DragOverlayExtender和DragOverlayBehavior一样且同样可以保存Panel的位置信息至Profile中。不同之处在于DragOverlayExtender和DragOverlayBehavior的拖拽实现方式中鼠标放在整个Panel的任何部分都可以开始拖拽而DragPanel在进行拖拽时只有鼠标放在指定的DragHandle类似于Windows窗口的标题栏部分中才能开始拖拽。 对于DragHandle的扩展性和实用性同样不敢恭维。 下面是一段示例代码 asp:Panel IDfloatPanel CssClassfloatPanel runatserver asp:Panel IDfloatPanelHandle CssClasshandle runatserver 窗口的拖动 /asp:Panel div classcontent 在Windows中对窗口的拖动似乎成了我们习以为常的事情。 ……………… ……………… Window窗口的表现行为一样。 /div/asp:PanelajaxToolkit:DragPanelExtender IDdpe TargetControlIDfloatPanel DragHandleIDfloatPanelHandle runatserver/ajaxToolkit:DragPanelExtender 效果如下 [3] 使用服务器端ReorderList ASP.NET AJAX Control Toolkit中的ReorderList控件将在页面中呈现出一个由数据绑定自动生成的条目列表。用户可以通过鼠标拖动某一项来直接改变该列表中条目彼此之间的相对位置关系且在拖动的过程中ReorderList控件提供了丰富的、可定制的视觉效果。当用户在某个位置放开鼠标之后ReorderList控件也将同样会自动通知与其绑定的数据源控件以Ajax的异步或整页回送的同步方式更新服务器端数据。 ReorderList控件的使用比较简单服务器端控件功能也相当的丰富扩展能力也不错。不过仍称不上最灵活比如我们想把条目在多个ReorderList之间拖放那么就没办法实现了——因此不要指望它能实现WebPart那样的功能。 详细介绍请参考《使用ASP.NET AJAX Control Toolkit中的ReorderList控件实现用鼠标拖动改变条目顺序》 下面是一段示例代码 ajaxToolkit:ReorderList IDmusicList CssClassmusicList DragHandleAlignmentLeft PostBackOnReorderfalse DataSourceIDmusicDataSource DataKeyFieldId SortOrderFieldOrder runatserver ItemTemplate ajaxToolkit:Rating IDrating runatserver CssClassrating StarCssClassratingStar FilledStarCssClassfilledRatingStar EmptyStarCssClassemptyRatingStar CurrentRating%# Bind(Rating) % MaxRating5 ReadOnlytrue /ajaxToolkit:Rating /ItemTemplate ReorderTemplate div classdragDue Drop Here! /div /ReorderTemplate DragHandleTemplate asp:Label IDlbTitle CssClassdragHandle ToolTipDrag Me! runatserver Text%# Bind(Name) % /asp:Label /DragHandleTemplate/ajaxToolkit:ReorderList 效果挺酷的 [4] 使用UpdatePanel与ASP.NET AJAX中的新版本WebPart控件 ASP.NET 2.0中的WebPart相关的控件虽然非常丰富易于使用且功能强大我们在程序中也很需要它所提供的拖拽功能但它却存在着两个致命的缺陷 拖放功能只支持IE浏览器。 每次用户通过拖放改变配件的位置之后页面总会自动进行回送以保存当前的设定。其中第一个问题可以通过ASP.NET AJAX中的新版本WebPart控件搞定第二个问题可以通过添加UpdatePanel搞定本来在CTP版本中的ASP.NET AJAX里面这些功能均已经完美实现了。谁知道在最新的Futures CTP中却又不好用了。 既然现在已经不能用了也就没必要分析其优点缺点了。不过还是给出一张截图吧缅怀一下曾经的辉煌注意这可是在Firefox中啊…… [5] 使用客户端DragDropList DragDropList定义于ASP.NET AJAX Futures CTP中功能非常强大且全部在客户端实现给服务器端减轻了不少的压力。使用DragDropList实现第4种解决方案中的WebPart类似的效果完全没有问题不过唯一让人感到遗憾的就是其扩展功能不是很好用户虽然可以随便将某个Panel从一个区域拖到另一个区域但拖拽的结果却很难持久化下来……且使用起来也不是那么的容易效率上更是不敢恭维……总之这是个很让人矛盾的东西有些鸡肋的感觉。 我曾经在《使用ASP.NET Atlas实现拖放Drag Drop效果下》这篇文章中给出过DragDropList的示例程序虽然是基于CTP版本的ASP.NET AJAX 不过实际上并不需要多少修改就能运行于最新版本之上。感兴趣的朋友可以看看也可以到官方论坛上搜索一下相关的主题。 [6] 在客户端自行实现IDragSource和IDropTarget接口 来到了这个解决方案可以说你对ASP.NET AJAX中的拖拽实现有了一个较深入的了解。上面的DragDropList其实就是实现了IDragSource和IDropTarget接口其中前者用来定义可以被拖拽的项目后者用来定义可以被投放的区域。详细理论上的说明可以参考我的文章《使用ASP.NET Atlas实现拖放Drag Drop效果上》虽然目前已经有所变化不过仍可以参考。 这种实现方案应该说是最为强大的了想要什么功能肯定都能实现。不过实际开发中的难度也不小——甚至可以说是相当复杂Jeff Prosise的这篇文章《Implementing Drag-Drop in ASP.NET AJAX》给出了一个非常简单的示例程序感兴趣想要学习的朋友不妨看看……转载于:https://www.cnblogs.com/dflying/archive/2007/03/26/687809.html
