In this article I’m going to explain how to create a drag and drop element using jQuery.
Through this coding we can drag any item which is under the list and drop any other place.
<!doctype html>
<html>
<head>
<title>::mindstick Sorting in jQuery::</title>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
#sort
{
list-style-type: none;
margin: 100;
padding: 10;
width: 100%;
}
#sort li
{
margin: 2px 2px 2px 2px;
padding: 0.5em;
padding-left: 2em;
font-size: 2em;
height: 18px;
}
</style>
<script>
$(function() {
$( "#sort" ).sortable();
$( "#sort" ).disableSelection();
});
</script>
</head>
<body>
<ul id="sort">
<li>ADO.NET</li>
<li>ASP.NET</li>
<li>PHP</li>
<li>Java</li>
<li>jQuery</li>
</ul>
</body>
</html>
Sortable ()
Sortable method in jQuery Enable a group of DOM elements to be Sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit.
disableSelection ()
disableSelection method is use to in jQuery script for make an unselect able text in your application.
After that coding we can get below output on your browser:
Leave Comment