Drag and Drop Sortable Lists using jQueryUI
How to Drag and Drop Sortable Lists using jQueryUI in asp.net:
In this post we see an Example and create a list of some
items. Then at run time we sort this given list using jquery. In this asp.net
tutorial we consider other popular post as like HOW TO USE JQUERY TOOLTIP WITH
CSS IN ASP.NET WEB APPLICATION, HOW TO MAKE A DIGITAL CLOCK WITH JQUERY &
CSS FOR DISPLAY TIME and JQUERY UI DATEPICKER (CALENDAR) EXAMPLE IN ASP.NET.
List of Jquery related Post:
- jquery disable or Enable submit button after validation
- Enable Disable Submit Button using jQuery
- Check Uncheck all asp.net CheckBox in asp.net using jQuery
- Example of jQuery Validate on Radiobuttonlist in Asp.Net using C#
- Limit Number of Characters in a TextArea using jQuery
- Limitation of Characters in Textbox or TextArea in asp.net using jquery:
- Example jQuery Validate on CheckBoxList using C#
- Check Uncheck all html CheckBox controls using jQuery:
- fill data into Dropdown list by using Jquery
- Validate ASP.Net RadioButtonList using JavaScript Example
- Example of jQuery Validate on Radiobuttonlist in Asp.Net using C#
- Example jQuery Validate on CheckBoxList using C#
- Asp.net CheckBoxList using jQuery.
- Cropping image using jQuery in asp.net
- Displaying the textbox value in javascript Messagebox
Reorder list using jQuery and ASP.NET :
Use fallowing link for sorting list by jquery. Copy these lines and Past in to head section.
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
Jquery function for sorting list:
Here we see a jquery function
that is use to perform drag and drop list item and sort according to user.
<script>
$(function () {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
</script>
jQuery UI sortable (drag & drop) with ASP.NET
For style use give code on page
<style>
#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>
Drag-and-drop sorting for our ASP.NET
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="sort_dives.aspx.vb" Inherits="sort_dives" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jQuery UI Sortable list in asp.net</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<style>
#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>
$(function () {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
</script>
</head>
<body>
<div align="center">
<ul id="sortable"
style="border: thin double #FF0000; background-color: #C0C0C0; width: 728px;">
<h1 style="color: #990000; text-decoration: underline">
Jquery sorting by drag and drop in asp.net</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>
jQuery UI sortable (drag & drop) with ASP.NET:
 |
| Sortable Lists using jQueryUI |
Other Asp.net post on this blog:
- Asp.net Checkbox List.
- Asp checkboxlist Example using C#
- hide radio buttons in javascript on.
- show and hide div by javascript.
- Asp checkboxlist control demo:
- Checkboxlist control in asp net
- Asp-checkboxlist control demo:
- Checkboxlist in asp.net(control example)
- Asp checkboxlist Example using C#.
- Checkboxlist in asp.net(control example)
- Ckeck box list example using javascript.
- Asp.net checkboxlist control example
- How to use CheckBox control in asp.net
- Asp.net CheckBoxList using jQuery
- Example of DropDownList inside GridView
- Check box in ASP.NET GridView
- Check box in ASP.NET GridView
- How to Bind Gridview Form database.
- Show grid view row details in to tooltip.
- Ckeck box list example using javascript in grid.
- Show gridview Row Details And Give Example.
- Example of Templatefield in asp.net gridview.
- Example of DropDownList inside GridView control
- Get selected radio button values using JQuery
- How do you do html text encodes using JavaScript
- Introduction of Asp.net grid view Control.
- How to check If checkbox Is checked in asp.net
- Validation checkbox control using JavaScript:
- Checkbox list Example using javascript
- Validation checkbox control using JavaScript
- Example jQuery Validate on CheckBoxList using C#
- Example of C# for Bind Data to asp.net Textbox inside gridview control
- Bind Data to asp.net textbox control in inside of gridview Using C# Example
- Limit Number of Characters in a TextArea using jQuery
Comments
Post a Comment