Dynamic Drag’n Drop With jQuery And ASP.NET

Photobucket In thi post i will show how to drag’n drop & saving the new positions to the database. Here is, how it is done by using jQuery & jQuery UI:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default2" %>

<!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 src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

   <script type="text/javascript" src="Scripts/jquery-ui-1.7.2.custom.min.js"></script>

   <script type="text/javascript">
       $(document).ready(function() {
           $("#contentLeft ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
               var order = $(this).sortable("toArray");
               $.ajax(
                   {
                       type: "POST",
                       url: "Default.aspx/Update",
                       data: "{'NewOrder': '" + order + "'}",
                       dataType: "json",
                       contentType: "application/json"

                   });
           }

           });

       });   
   </script>

   <style type="text/css">
       .itemStyle
       {
           background-color: #c0c0c0;
           font-family: Verdana;
           list-style: none;
       }
       .alter
       {
           background-color: #000fff;
           font-family: Verdana;
           list-style: none;
       }
       .contentLeft
       {
           height: 100%;
           width: 300px;
           overflow: auto;
       }
   </style>
</head>
<body>
   <form id="form1" runat="server">
   <div id="contentLeft" class="contentLeft">
       <asp:Repeater ID="rptLan" runat="server">
           <HeaderTemplate>
               <ul>
           </HeaderTemplate>
           <ItemTemplate>
               <li id="<%#Eval("ID")%>" class="itemStyle">
                   <%#Eval("Name")%></li>
           </ItemTemplate>
           <AlternatingItemTemplate>
               <li id="<%#Eval("ID")%>" class="alter">
                   <%#Eval("Name")%></li>
           </AlternatingItemTemplate>
           <FooterTemplate>
               </ul>
           </FooterTemplate>
       </asp:Repeater>
   </div>
   <div id="divRight">
   </div>
   </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections.Specialized;

public partial class Default2 : System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
   {
       DemoDataContext db = new DemoDataContext();
       var query = from c in db.demos
                   orderby c.Order
                   select c;
       rptLan.DataSource = query;
       rptLan.DataBind();

   }
   /// <summary>
   /// Page Method for updating order
   /// </summary>
   /// <param name="NewOrder"></param>
   [System.Web.Services.WebMethod]
   public static void Update(string NewOrder)
   {
       DemoDataContext db = new DemoDataContext();
       int listingCounter = 1;
       foreach (var item in NewOrder.Split(','))
       {
           demo demo = db.demos.Single(x => x.ID == int.Parse(item.ToString()));
           demo.Order = listingCounter;
           db.SubmitChanges();
           listingCounter++;

       }
   }
}
{{Download}}

3 comments:

  1. not working in IE9 :-(

    ReplyDelete
  2. a really great tutorial, thanks a lot!

    ReplyDelete
  3. my datalist jst allow me to drag, the item comes again to its original place, after the mouse key is released

    ReplyDelete