Sorting by Drag and drop list item using jQuery
In this article, we have set that
sorting by drag and drop properties using jQuery.
Source Code:-
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="listitem.aspx.cs" Inherits="listitem" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sorting by
Drag and drop list item using jquery</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"
type="text/javascript" />
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"
type="text/javascript"></script>
<style type="text/css">
#sortable
{
list-style-type:
none;
margin:
0;
padding:
0;
width:
50%;
}
#sortable
li
{
margin:
0 3px 3px 3px;
padding-left:
1.5em;
font-size:
1.4em;
height:
18px;
width:
348px;
padding-right:
0.4em;
padding-top:
0.4em;
padding-bottom: 0.4em;
}
#sortable
li span
{
position:
absolute;
margin-left:
-1.3em;
}
</style>
<script type="text/javascript">
$(function
() {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
</script>
</head>
<body>
<div align="center">
<ul id="sortable">
<h1>
Sorting by Drag and drop list
item using jquery
</h1>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List
Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List
Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List
Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List
Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List
Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List
Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>List
Item 7</li>
<br />
</ul>
<br />
</div>
</body>
</html>
Out-Put:-
Sorting by Drag and drop list item using jQuery
Reviewed by NEERAJ SRIVASTAVA
on
12:43:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
12:43:00 PM
Rating:
No comments: