How to handle the ReorderList's Drag/Drop event at client side?

最新推荐文章于 2024-09-07 22:47:34 发布

awxtm3831

最新推荐文章于 2024-09-07 22:47:34 发布

阅读量114

点赞数

文章标签： xhtml ui javascript ViewUI

原文链接：http://www.cnblogs.com/Zhi-QiangNi/archive/2009/02/12/1388958.html

版权

Preface

ReorderList is an ASP.NET AJAX control that implements a bulleted, data-bound list with items that can be reordered interactively. To reorder the items in the list, the user simply drags the item's control bar to its new location. Graphical feedback is shown where the item will be placed as it is dragged by the user. The data source is updated after the item is dropped in its new location.

Sometimes we may need to handle the drag event to change the dragged item's style or popup some message after dropping it to a new location. Firstly, let's dig into the design code to find some useful handlers or events.

Background

Code
    // void onDragStart()
    onDragStart: function() {
        this._validate();
    },

    add_reorderComplete : function(handler) {

        this.get_events().addHandler("reorderComplete", handler);
    },

    remove_reorderComplete : function(handler) {

        this.get_events().removeHandler("reorderComplete", handler);

    },

Scenario

Here is a scenario. One customer placed a Command Button inside the ItemTemplate, then he can execute some operation in the server side command event. His target was to changing the selected item's style to specify it when clicking on the command button.

We need to split this goal into points:

As the events of ReorderList are client side events, we need to change the style at client side.
The ReorderList creates the DragVisual based on the dragged item including the style, so, we have to recover the original style of the items before dragging or after dropping.
The command button would make a post back after clicking on it, so, we have to cache the selected item's index in the cookie, then, changing the style after page's reload at client side.

Code

Here is my detail code of this solution:

Code
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestChangeStyleWhenClicked.aspx.vb"
    Inherits="SoluTest_ReorderList.TestChangeStyleWhenClicked" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxControlToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript">

        function pageLoad() {
            //Find the ReorderList's Client Behavior by accessing this parameter--the ID_dItemEx;
            //Then, add a handler to the dragStart and reorderComplete event to recover all the items' original style
            $find("ReorderList1_dItemEx").onDragStart = function() {
                recoverStyle();
                $find("ReorderList1_dItemEx")._validate();
            };
            $find("ReorderList1_dItemEx").add_reorderComplete(recoverStyle);
            if (getCookie()) {
                //Change the selected item's style
                $get(getCookie()).className = "itemClicked";
            }
        }

        function changeClickedStyle(button) {
            //To recover all the items' original style
            recoverStyle();
            //Change the selected item's style
            //$get(button.id.replace('commandButton', 'item')).className = "itemClicked";
            setCookie(button.id.replace('commandButton', 'item'));
        }

        function recoverStyle() {
            //To recover all the items' original style
            for (i = 0; i < $find("ReorderList1_dItemEx")._element.children.length; i++) {
                var item = $get($find("ReorderList1_dItemEx")._element.children[i].id + '_item');
                item.className = "itemArea";
            }
        }

        function setCookie(cookieValue) {
            sVar = "selectedIndex";
            //the default expiration time is 1 minute
            var date = new Date();
            date.setTime(new Date().getTime() + (60 * 1000));
            theCookie = sVar + '=' + cookieValue + '; expires=' + date.toGMTString();
            document.cookie = theCookie;
        }

        function getCookie() {
            sVar = "selectedIndex";
            cookies = document.cookie.split('; ');
            for (var i = 1; i <= cookies.length; i++) {
                if (cookies[i - 1].split('=')[0] == sVar) {
                    return cookies[i - 1].split('=')[1];
                }
            }
        }
    style type="text/css">
        /*Reorder List*/.dragHandle
        {
            width: 10px;
            height: 15px;
            background-color: Blue;
            background-image: url(images/bg-menu-main.png);
            cursor: move;
            border: outset thin white;
        }
        .callbackStyle
        {
            border: thin blue inset;
        }
        .callbackStyle table
        {
            background-color: #5377A9;
            color: Black;
        }
        .reorderListDemo li
        {
            list-style: none;
            margin: 2px;
            background-image: url(images/bg_nav.gif);
            background-repeat: repeat-x;
            color: #FFF;
        }
        .reorderListDemo li a
        {
            color: #FFF !important;
            font-weight: bold;
        }
        .reorderCue
        {
            border: dashed thin black;
            width: 100%;
            height: 25px;
        }
        .itemArea
        {
            margin-left: 15px;
            font-family: Black, Verdana, sans-serif;
            font-size: 1em;
            text-align: left;
            color: Black;
        }
        .itemClicked
        {
            margin-left: 15px;
            font-family: Arial, Verdana, sans-serif;
            font-size: 1em;
            background-color: Yellow;
            color: Red;
            text-align: left;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="reorderListDemo">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <AjaxControlToolkit:ReorderList ID="ReorderList1" runat="server" AllowReorder="True"
            DataSourceID="SqlDataSource1" PostBackOnReorder="false" CallbackCssStyle="callbackStyle"
            DragHandleAlignment="Left" ItemInsertLocation="Beginning" DataKeyField="ID" SortOrderField="Priority"
            Width="400px">
            <ItemTemplate>
                <asp:Panel runat="server" CssClass="itemArea" ID="item">
                    <asp:Label ID="Label1" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("USER"))) %>' />
                    <span>- </span>
                    <asp:Label ID="lblCategory" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("CATEGORY"))) %>' />
                    <asp:Button runat="server" ID="commandButton" CommandName="Click" Text="Select to change style" OnClientClick="changeClickedStyle(this);" />
                </asp:Panel>
            </ItemTemplate>
            <ReorderTemplate>
                <asp:Panel ID="Panel2" runat="server" CssClass="reorderCue" />
            </ReorderTemplate>
            <DragHandleTemplate>
                <div class="dragHandle">
                </div>
            </DragHandleTemplate>
        </AjaxControlToolkit:ReorderList>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Reorder-MasterAndDetailConnectionString1 %>"
            DeleteCommand="DELETE FROM [MASTER] WHERE [ID] = ?" InsertCommand="INSERT INTO [MASTER] ([USER], [CATEGORY], [Priority]) VALUES (?, ?, ?)"
            ProviderName="<%$ ConnectionStrings:Reorder-MasterAndDetailConnectionString1.ProviderName %>"
            SelectCommand="SELECT [ID], [USER], [CATEGORY], [Priority] FROM [MASTER]" UpdateCommand="UPDATE [MASTER] SET [USER] = ?, [CATEGORY] = ?, [Priority] = ? WHERE [ID] = ?">
            <DeleteParameters>
                <asp:Parameter Name="ID" Type="Int32" />
            </DeleteParameters>
            <UpdateParameters>
                <asp:Parameter Name="USER" Type="String" />
                <asp:Parameter Name="CATEGORY" Type="String" />
                <asp:Parameter Name="Priority" Type="Int32" />
                <asp:Parameter Name="ID" Type="Int32" />
            </UpdateParameters>
            <InsertParameters>
                <asp:Parameter Name="USER" Type="String" />
                <asp:Parameter Name="CATEGORY" Type="String" />
                <asp:Parameter Name="Priority" Type="Int32" />
            </InsertParameters>
        </asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Note

This is only a particular sample to handle the drag/drop event. You can modify it based on your own request. Feel free to discuss this UI with me here or in the ASP.NET Ajax Forum.

The related thread url: http://forums.asp.net/t/1380407.aspx

转载于:https://www.cnblogs.com/Zhi-QiangNi/archive/2009/02/12/1388958.html

awxtm3831

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
How to handle the ReorderList's Drag/Drop event at client side?

PrefaceReorderList is an ASP.NET AJAX control that implements a bulleted, data-bound list with items that can be reordered interactively. To reorder the items in the list, the user simply drags...
复制链接

扫一扫