This article will show you how you can drag and drop li and
ul item top and bottom position using jquery in asp.net.
Some of my previous articles are as follows: User Registration Form With
ToolTip Message and Validation Using jQuery, C#.Net in Asp..Net, Link Button or HyperLink With
Mouse Tracking ToolTip Using jQuery in Asp..Net, Dynamic Vertical Css Menu
Using jQuery, Css and C#.net In Asp.net MVC, jQuery DatePicker Calendar
With Slide Down and Slide Up Effect In Asp.Net, Shopping Cart Example to Drag
and Drop Item in Cart In Asp.Net MVC Using jQuery, Bind jQuery DatePicker
Calendar In MVC WebGrid and Retrive Value Using Asp.net MVC, C#.Net,
jQuery Code to Select All Text
in TextBox on Click in Asp.Net.
So for this article first we will create a new asp.net
application and add the below mention jquery library reference.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
|
Now add the below code into your header of the page.
<style>
.ulclass
{
border:
1px solid #eee;
width:
142px;
min-height:
20px;
list-style-type:
none;
margin:
0;
padding:
5px 0 0 0;
float:
left;
margin-right:
10px;
}
</style>
<script>
$(function
() {
$("#moveiableUL").sortable();
$("#moveiableUL").disableSelection();
});
</script>
|
In above code I have specified the short able and after
moving deselecting the control.
Now here is the complete code of the page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Drag and
Drop UL, LI Item Top and Botton Using jQuery In Asp.Net</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
.ulclass
{
border:
1px solid #eee;
width:
142px;
min-height:
20px;
list-style-type:
none;
margin:
0;
padding: 5px 0 0 0;
float:
left;
margin-right:
10px;
}
</style>
<script>
$(function
() {
$("#moveiableUL").sortable();
$("#moveiableUL").disableSelection();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="moveiableUL" class="ulclass">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
</div>
</form>
</body>
</html>
|
Now we have done. Run the application and check the output.
About the Author
0 comments:
Please let me know your view