制作类似于googleIG的页面（二）

 

第二天：建立一个通用的拖拽、删除扩展控件和多列删除区域

Ajax控件库提供了一个DragPanel扩展控件，可以提供拖拽和删除的功能。它还提供了一个RecorderList控件。我们的小窗体基本是靠表头来完成拖拽和垂直的移动。所以我们必须要在每一列创建一个记录列表，然后再它基础上使用DragPanel去拖拽小窗体。但是我不能使用RecorderList主要是因为：（略）

因此，我创建了一个CustomDragDropExtender和一个CustomFloatingExtender。CustomDragDropExtender是为小窗体停靠在列容器里创建的。它提供了重新排序的功能。以下是代码：

<asp:Panel ID="LeftPanel" runat="server" class="widget_holder" columnNo="0">

        <div id="DropCue1" class="widget_dropcue">

        </div>

</asp:Panel>

<cdd:CustomDragDropExtender ID="CustomDragDropExtender1" runat="server"

      TargetControlID="LeftPanel" DragItemClass="widget" 

      DragItemHandleClass="widget_header"

      DropCueID="DropCue1" DropCallbackFunction="WidgetDropped" />

LeftPanel成为了一个窗体容器它允许小窗体删除和重新排序。DragItemClass属性定义了哪些条目可以排序。这样可以阻止一些没有内容的窗体参加排序。仅仅是DIV的属性为Widgetde 才可以排列。因此如下所示，这里有5个class名为widget的DIV。

<div id="LeftPanel" class="widget_holder" >

        <div id="WidgetContainer1_Widget" class="widget"> ... </div>

        <div id="WidgetContainer2_Widget" class="widget"> ... </div>

        <div id="WidgetContainer3_Widget" class="widget"> ... </div>

        <div id="WidgetContainer4_Widget" class="widget"> ... </div>

        <div id="WidgetContainer5_Widget" class="widget"> ... </div>

        <div>This DIV will not move</div>

        <div id="DropCue1" class="widget_dropcue"></div>

</div>

它还包含了一个DropCallbackFunction负责删除一个小窗体。

function WidgetDropped( container, item, position )

{

        var instanceId = parseInt(item.getAttribute("InstanceId"));

        var columnNo = parseInt(container.getAttribute("columnNo"));

        var row = position;

        WidgetService.MoveWidgetInstance( instanceId, columnNo, row );

}

这样可以判断出哪些小窗体时可以被删除或者是移动的。然后我可以调用一个web service和异步通知服务器告诉它们发生了什么。服务器更新小窗体在新的位置。