.NET Articles, Web Devploment, ASP.NET, HTML, Sharepoint 2010, Aamir Hasan
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here



Posted by Aamir Hasan   on Monday, September 24, 2012 Total Views:  

In this example you will see how to use Sortable multiple lists using jQuery UI in page. I have used jquery UI Sortable method. I have created three lists, first list will show book name and second and third list will display book name, picture and author name. You can add more information in this example. I have used server side script on book list, you can attached it with database, on page load jquery UI Sortable method will be connected with three lists and after that ajax method will send request to server to fetch book list and append it to three list. Here is a question how will it append with three lists. Well, I have password column name in the Book class to get where list is at append. When user drop the list detail information of book it will be hidden on first list and when it’s dragged to second and third list it will show the detailed list. Let’s see the example.



Open your Visual Studio. Add new or existing web site. Add new Sortable-List.aspx page.

Add the following jquery, jQuery UI reference inside head section of design page.

    <script src=""


    <script src=""


Add the following jquery script code at the bottom of head section.


    <script type="text/javascript">

        $(function () {

            $("#contentLeft ul, #contentright ul").sortable({

                connectWith: ".connectedSortable",

                placeholder: "ui-state-highlight",

                stop: function (evt, ui) {

                    var id = ui.item.parent().parent().prop("id")

                    tt = ui.item;

                    if (id == "contentLeft") {



                    if (id == "con-r" || id == "con-l") {





            $("#idsubmit").click(function () {

                var msg = $("#table1 > tbody");

                var list = $("#contentLeft ul li");


                $(list).each(function (index) {

                    $(msg).append("<tr><td>" + index + "</td><td> " + $(this).closest("li").prop("id") + "</td><td> " + $(this).text() + "</td></tr>");





        function fetchList() {


                type: "POST",

                url: "Sortable-List.aspx/fetchData",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (response) {

                 $.each(response.d, function (index, item) {

                   if (item.Column == "1")

                       $("#contentLeft  ul").append("<li id=" + item.ID + "> <a target='_blank' href='" +

                          item.Link + "'>" + item.Name + "</a> <p class='hide'><img  src='" + item.Img +

                           "'/><span>" + item.Author + "</span></p></li>");

                   if (item.Column == "2")

                      $("#con-l  ul").append("<li id=" + item.ID + "> <a target='_blank' href='"

                          + item.Link + "'>" + item.Name + "</a> <p class='show'><img algin='top' src='" +

                          item.Img + "'/><span>" + item.Author + "</span></p></li>");

                   if (item.Column == "3")

                      $("#con-r  ul").append("<li id=" + item.ID + "> <a target='_blank' href='" + item.Link + "'>" +

                          item.Name + "</a> <p class='show'><img  algin='top' src='" + item.Img + "'/><span>" +

                          item.Author + "</span></p></li>");



                error: function () {

                    alert("Failed to load data");






Above script will connect three list items and stop method will append list after drag and drop with respect to lists.


The following are HTML tag; please them inside the form tag.


    <div id="content">

            <div class="edit-mu-li" id="contentLeft">

                <strong>Book List</strong>

                <ul class="connectedSortable"></ul>


            <div class="edit-mu-li" id="contentright">

                <div class="edit-mu-li" id="con-l">

                    <strong>Book Detail</strong>

                    <ul class="connectedSortable ui-sortable"></ul>


                <div class="edit-mu-li" id="con-r">

                    <strong>Book Detail</strong>

                    <ul class="connectedSortable ui-sortable"></ul>



            <div class="clear">&nbsp;</div>



I have also applied some css on this example; you will find it from attached zip file.


On Sortable-List.aspx.cs page add Book class


    public class Book


        public int ID { get; set; }

        public string Name { get; set; }

        public string Author { get; set; }

        public string Img { get; set; }

        public string Link { get; set; }

        public int Column { get; set; }



The following script will return book list to client side by using ajax method.




    public static List<Book> fetchData()


        return  new    List<Book>() { 

        new Book(){ Column=1, ID=1, Name="Beginning ASP.NET 4.5", Author="Imar Spaanjaars" ,



        new Book(){ Column=2, ID=1, Name="Beginning Visual C# 2012", Author="Karli Watson, Christian Nagel, Jacob Hammer Pedersen, Jon Reid, Morgan Skinner"



        new Book(){ Column=3, ID=1, Name="Professional Microsoft IIS 8", Author="Kenneth Schaefer" ,



        new Book(){ Column=1, ID=1, Name="Professional C# 2012 and .NET 4.5", Author="Christian Nagel, Bill Evjen, Jay Glynn, Karli Watson, Morgan Skinner"

            Link="", Img=""},

        new Book(){ Column=1, ID=1, Name="Professional HTML5 Mobile Game Development", Author="Pascal Rettig"



        new Book(){ Column=2, ID=1, Name="Beginning SharePoint 2010 Development", Author="Steve Fox" ,



        new Book(){ Column=3, ID=1, Name="Facebook Application Development", Author="Nick Gerakines" ,






Note: Ajax method will not fetch data until unless fetchdata function is not static.


This example guides you how to sortable multiple list and get book detail on right two list and display only name of book on first list. By using this example you can make dashboard or drag and drop add to credit card with detail information on client side.


In my next tutorial, I will demonstrate how to fetch data from server side when list is drop



Mutiple-sortable-list.rar (3.25 kb)


See live demo

Protected by Copyscape Online Plagiarism Tool

Comments (1) -

David United States
10/3/2012 9:28:09 PM #

Thank you so much. I have spent a lot of money which you have provided here very easily. Really helpful.

heating and air conditioning
heating and air conditioning United States
8/16/2015 5:39:59 PM #

Hello, this is actually a great post. You get my vote for Help Me! My Website is Failing! | Power Marketing and also I will bookmark this website right now.

animal jam
animal jam United States
3/4/2016 9:38:36 PM #

Only period will tell, but through the screenshots released today, apparently, at the very least, Zeno Clash 2 will competitor its predecessor in terms of pictures. The emergence of a handful of dominant players like Ruler (Candy Smash Saga) and Supercell (Clash of Clans), in which Japan's Softbank is definitely invested, offers driven upward marketing costs, said Joost van Dreunen, CEO associated with research company SuperData. We have been not the best attackers in the game, but we can win mainly because we are a lot more active after that most other clans. The last Application that managed to get difficult to deposit my mobile phone and table was Conflict of Clans.

Add comment

  Country flag

  • Comment
  • Preview

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5