拖放门户 Kickstart

分享于 

7分钟阅读

Web开发

  繁體 雙語

介绍

本教程作为拖放功能的基础,并推动门户网站开发的direction。 代码简洁简单,所以可以在任何编码环境中实现。

这并不是完全功能的门户 CMS,只是拖放小部件区域功能的一个小例子,它是拖放小部件区域功能来开发你自己的门户网站。

背景

I的工具,包括RadDock和Dropthings拖放框架,我的目标是创建不依赖服务器端框架( 所提到的上面 依赖于Microsoft扩展框架)的类似功能。

最近,我发现了一个非常好且轻量级的示例 ,并发现在拖放脚本中有一个很好的基础,可以在拖放脚本中实现语言无关的拖放接口,这是一个很重要的值,即。 调用以下函数:

<script language="javascript" type="text/javascript">
 function moveWidget(elementid, parentid, index) {
 window.alert("element:" + elementid + ", parent:" + 
 parentid + ", index:" + index);
 } 
</script> 

使用代码

将拖放功能分配给列和中的脚本导入非常重要,但是主要关注将值返回给用户的moveWidget 函数,这是非常重要的。 在. NET 中,可以使用 Ajax。web方法或者服务来将这些值解析为服务器端:

 <!--Drag drop Functionality Scripts -->
 <script language="javascript" type="text/javascript">
 function moveWidget(elementid, parentid, index) {
 window.alert("element:" + elementid + ", parent:" + 
 parentid + ", index:" + index);
 } 
 </script>
 <script type="text/javascript" src="Scripts/prototype.js"></script>
 <script type="text/javascript" 
 src="Scripts/scriptaculous.js?load=effects,dragdrop"></script>
 <script type="text/javascript" src="Scripts/portal.js"></script>
 <script type="text/javascript">
 var settings = {};
 var portal;
 function init() {
 portal = new Portal();
 portal.applySettings(settings);
 }
 try {
 Event.observe(window, 'load', init, false);
 } catch (exception) { }
</script> 

要定义列/拖放区域,请使用。

class="portal-column" id="portal-column-0"
。用不同的整数命名每个连续列。

要定义小部件/停靠容器,请使用。

<divclass="block"id="block-archive-0"><divclass="handle"> Dock 1</div><divclass="content"><div> Dock 1 content
 <br/><br/><br/><br/></div></div></div>

。用不同的id命名每个 block 存档 id。

以下是一个示例:

<tdstyle="vertical-align:top;"><divclass="portal-column"id="portal-column-0"><h2> Column 0</h2><divclass="block"id="block-archive-0"><divclass="handle"> Dock 1</div><divclass="content"><div> Dock 1 content
 <br/><br/><br/><br/></div></div></div><divclass="block"id="block-archive-1"><divclass="handle"> Dock2</div><divclass="content"><div> Dock 2 content
 <br/><br/><br/><br/></div></div></div><divclass="block"id="block-archive-2"><divclass="handle"> Dock 3</div><divclass="content"><div> Dock 3 content
 <br/><br/><br/><br/></div></div></div></div></td><tdstyle="vertical-align:top;"><divclass="portal-column"id="portal-column-1"><h2> Column 1</h2></div></td><tdstyle="vertical-align:top;"><divclass="portal-column"id="portal-column-2"><h2> Column 2</h2></div></td>

移动到服务器端驱动数据

下面是一个实体关系的linqtosql图。 这个过程仍在进行中,但是我希望你了解实体如何映射到特定的区域,页面和模板可以绑定到特定的区域,PortalWidget 上的顺序属性在这里是主要的焦点。

Portal_Website

当发生拖放时,你可以使用 Ajax。web方法或者 Web服务 来更新数据库。 ( 因为黑客可以用请求来轰炸你的服务器,所以请保护这些

下面是我用来更新数据库的最新位置数据的代码 Fragment:

publicstaticvoid PerformDragDrop(Guid widgetid, 
 Guid templateid, Guid pageid, string zoneID, int seq)
{ 
 LINQ.DatabaseDataContext db = 
 new WebCMS.LINQ.DatabaseDataContext(LINQ.Connection.GetDBConnectionString());
 LINQ.PortalWidget movedWidget = 
 db.PortalWidgets.SingleOrDefault(p => p.WidgetID.Equals(widgetid)
 &&p.TemplateID.Equals(templateid)&&p.PageID.Equals(pageid));
 if (movedWidget!= null)
 {
 var previousZoneWidgets = from p in movedWidget.PortalZone.PortalWidgets
 orderby p.Sequence ascendingselect p;
 int counter = 0;
 foreach (LINQ.PortalWidget widget in previousZoneWidgets)
 { //Re arrange previos zone widget residedif (!widget.Equals(movedWidget))
 {
 widget.Sequence = counter;
 counter++;
 }
 }
 //========Previous zone re-arranged============////========Add Widget to new Zone ==============// counter = 0;
 var newZoneWidgets = from p in db.PortalWidgets
 where p.ZoneID.Equals(zoneID)
 orderby p.Sequence ascendingselect p;
 movedWidget.Sequence = seq;
 movedWidget.ZoneID = zoneID;
 foreach (LINQ.PortalWidget widget in newZoneWidgets)
 {
 if (widget.Sequence >= seq)
 {
 if (widget.Sequence == seq)
 {
 counter = seq + 1;
 widget.Sequence = counter;
 }
 else {
 widget.Sequence = counter;
 counter++; 
 }
 } 
 }
 db.SubmitChanges(); 
 } 
}

这是使用 上面 提到的图表的LINQ语句。

首先重新排列小部件排除的小部件,然后将小部件移动到小部件中,并将移动的小部件插入正确的序列。

已知问题和限制

在示例中拖放时,小部件可能意外跳到中间列。 这只是因为警报,当点击时突然跳到中间列,因为它是最后一个鼠标位置。 当你在头部的moveWidget JavaScript函数中不提醒时,这将消失。

历史记录

  • 第五 2009年06月: 初始帖子

相关文章