Introduction
In my previous articles I told you about:
This article will explain time and distance delay while reordering elements in a List using jQuery.
Now let's see the procedure to create the application.
Step 1
You need to first add two external jQuery files to your application, they are:
- jquery-1.9.1.js
- jquery-ui-1.10.3.js
You can either download these files from the official jQuery website or you can download my application and can fetch these from it.
After downloading these files you need to add them to your application and register them in the Head Section of your application.
<head runat="server">
<title></title>
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3.js"></script>
</head>
Step 2
Now I will create two Lists that will be reordered, also the time and distance delay will be seen while reordering them.
<body>
<h3>I will Show the Time Delay</h3>
<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>
<h3>I will Show the Distance Delay</h3>
<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>
Step 3
Now I will work on the JavaScript of this application that will get the time and distance delays.
<script>
$(function () {
$("#sort_me1, #sort_me2").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
$("#sort_me1").sortable({
delay: 500
});
$("#sort_me2").sortable({
distance: 20
});
});
</script>
In this JavaScript I first allowed the Lists to be connected List, by this the user will be able to take one list element into the second list. Then I provided a delay in sorting, by this there will be a delay of 500ms while reordering an element. At the end I have provided a delay of 20px, this means that when the user drags an element then that element will be dragged when the user has crossed an area of 20px.
Now our application is created and is ready to be executed.
Output
On running the application you will get an output like this one:
![]()
Here if you reorder the elements in the first list than a small delay of a few ms will be noticed by you, also if the elements in the second list are reordered than you will notice that the reorder will work only when you have passed a few distances by dragging the element.
The complete code of this application is as follows:
<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();
$("#sort_me1").sortable({
delay: 500
});
$("#sort_me2").sortable({
distance: 20
});
});
</script>
</head>
<body>
<h3>I will Show the Time Delay</h3>
<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>
<h3>I will Show the Distance Delay</h3>
<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>