Multiple Sortable lists using jQuery UI in asp.net

In this example you will see how to use Sortable multiple lists using jQuery UI in asp.net 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.

type="text/javascript"></script>

type="text/javascript"></script>

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

$(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") {

ui.item.find('p').removeClass('show').addClass('hide');

}

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

ui.item.find('p').removeClass('hide').addClass('show');

}

}).disableSelection();

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

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

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

$(msg).html("");

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

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

});

fetchList();

});

function fetchList() {

$.ajax({

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");

}

});

}

</script>

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>

<strong>Book Detail</strong>

</div>

<strong>Book Detail</strong>

</div>

</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.

[WebMethod]

public staticList<Book> fetchData()

{

return new List<Book>() {

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

Link="http://www.wrox.com/WileyCDA/WroxTitle/Beginning-ASP-NET-4-5-in-C-and-VB.productCd-1118311809.html",

Img="http://media.wiley.com/product_data/coverImage/09/11183118/1118311809.jpg"},

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

Link="http://www.wrox.com/WileyCDA/WroxTitle/Beginning-Visual-C-2012.productCd-1118314417.html",

Img="http://media.wiley.com/product_data/coverImage/17/11183144/1118314417.jpg"},

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

Link="http://www.wrox.com/WileyCDA/WroxTitle/Professional-Microsoft-IIS-8.productCd-1118388046.html",

Img="http://media.wiley.com/product_data/coverImage/46/11183880/1118388046.jpg"},

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

Link="http://www.wrox.com/WileyCDA/WroxTitle/Professional-C-2012-and-NET-4-5.productCd-1118314425.html", Img="http://media.wiley.com/product_data/coverImage/25/11183144/1118314425.jpg"},

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

Link="http://www.wrox.com/WileyCDA/WroxTitle/Professional-HTML5-Mobile-Game-Development.productCd-1118301323.html",

Img="http://media.wiley.com/product_data/coverImage/23/11183013/1118301323.jpg"},

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

Link="http://www.wrox.com/WileyCDA/WroxTitle/Beginning-SharePoint-2010-Development.productCd-0470584637.html",

Img="http://media.wiley.com/product_data/coverImage/37/04705846/0470584637.jpg"},

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

Link="http://www.wrox.com/WileyCDA/WroxTitle/Facebook-Application-Development.productCd-0470246669.html",

Img="http://media.wiley.com/product_data/coverImage/69/04702466/0470246669.jpg"}

};

}

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