Reorder Elements in Connected Lists Through Mouse Using jQuery

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:

reorder elements in connect list

 

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-typenonemargin0padding0 0 2.5emfloatleftmargin-right10px; }

  #sort_me1 li { margin0 5px 5px 5pxpadding5pxfont-size1.2emwidth:300pxbackground-color:skyblue; }

  #sort_me2 li { margin0 3px 3px 3pxwidth:300pxborder:solid 1px blackbackground-color:violetpadding5pxfont-size1.4emheight18px; }

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

  1. jQuery-ui-1.10.3.js
  2. 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-typenonemargin0padding0 0 2.5emfloatleftmargin-right10px; }

  #sort_me1 li { margin0 5px 5px 5pxpadding5pxfont-size1.2emwidth:300pxbackground-color:skyblue; }

  #sort_me2 li { margin0 3px 3px 3pxwidth:300pxborder:solid 1px blackbackground-color:violetpadding5pxfont-size1.4emheight18px; }

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


Next Recommended Readings