Introduction
In my previous article I explained How to Reorder Elements in List Through Mouse Using jQuery.
This article explains how to reorder elements in Connected Lists using the Mouse using jQuery.
What we are creating:
Now let's see the procedure required to create such an application.
Step 1
First we create an application in .NET.
In this application I created two Lists, each having some objects that will be reordered.
<body>
<ul id="sort_me1" class="connectedSortable">
<li >Item 1</li>
<li >Item 2</li>
<li >Item 3</li>
<li >Item 4</li>
<li >Item 5</li>
</ul>
<ul id="sort_me2" class="connectedSortable">
<li >Item 1</li>
<li >Item 2</li>
<li >Item 3</li>
<li >Item 4</li>
<li >Item 5</li>
</ul>
</body>
The IDs are different but the same class is applied to both the Unordered Lists.
Step 2
Now I will add some CSS Style to this Unordered List as in the following:
<style>
#sort_me1, #sort_me2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
#sort_me1 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width:300px; background-color:skyblue; }
#sort_me2 li { margin: 0 3px 3px 3px; width:300px; border:solid 1px black; background-color:violet; padding: 5px; font-size: 1.4em; height: 18px; }
</style>
Step 3
Now comes the main and final part of this application, the jQuery part.
First of all you need to add the following two external jQuery files to your application:
- jQuery-ui-1.10.3.js
- jQuery-1.9.1.js
You can either download them from the jQuery Site or you can download the Zip file of this application provided at the start of the article and than fetch the jQuery files from it.
Now we will create the JavaScript functions for our application.
<script>
$(function () {
$("#sort_me1, #sort_me2").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
Here you can see that I had provided "ConnectWith", if we want any List or Div to communicate with each other than we can use ConnectWith.
The complete code of this application is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication45.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3.js"></script>
<style>
#sort_me1, #sort_me2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
#sort_me1 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width:300px; background-color:skyblue; }
#sort_me2 li { margin: 0 3px 3px 3px; width:300px; border:solid 1px black; background-color:violet; padding: 5px; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function () {
$("#sort_me1, #sort_me2").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
</head>
<body>
<ul id="sort_me1" class="connectedSortable">
<li >Item 1</li>
<li >Item 2</li>
<li >Item 3</li>
<li >Item 4</li>
<li >Item 5</li>
</ul>
<ul id="sort_me2" class="connectedSortable">
<li >Item 1</li>
<li >Item 2</li>
<li >Item 3</li>
<li >Item 4</li>
<li >Item 5</li>
</ul>
</body>
</html>
Now our application is ready to be executed.
Output
First you will see an output window like this one:
![reorder elements in connect list]()
Now you can reorder the list in any manner you like.
![reorder elements in connect List]()