Dynamic Drag’n Drop With jQuery And ASP.NET

JQuery is a trendy javascript library for accessing and manipulating the DOM element. JQuery has thousand of the plugin which makes developer life easier.  In this post, I will show how to implement drag-drop & saving the new positions to the database. Here is how it is done by using jQuery & jQuery UI:

Dynamic Drag’s Drop With jQuery And ASP.NET

<%@ 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">

   <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");
                       type: "POST",
                       url: "Default.aspx/Update",
                       data: "{'NewOrder': '" + order + "'}",
                       dataType: "json",
                       contentType: "application/json"




   <style type="text/css">
           background-color: #c0c0c0;
           font-family: Verdana;
           list-style: none;
           background-color: #000fff;
           font-family: Verdana;
           list-style: none;
           height: 100%;
           width: 300px;
           overflow: auto;
   <form id="form1" runat="server">
   <div id="contentLeft" class="contentLeft">
       <asp:Repeater ID="rptLan" runat="server">
               <li id="<%#Eval("ID")%>" class="itemStyle">
               <li id="<%#Eval("ID")%>" class="alter">
   <div id="divRight">
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;

   /// <summary>
   /// Page Method for updating order
   /// </summary>
   /// <param name="NewOrder"></param>
   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;

Next Post Previous Post
No Comment
Add Comment
comment url