Create manually sortable list using jquery is one of the simple concept, You can sort the list simply drag and drop the list in which order you want. This may useful for web developers. The below examples have the demo page and full source code. You can customize the code and use it according to your choice. I hope this example is very useful.
Create Manually Sortable list :
<!doctype html>
<head>
<meta charset="utf-8">
<title>How to create manually sortable list using Jquery</title>
<style>
.sortable {
margin: auto;
padding: 0;
width: 360px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: move;
}
.sortable li {
list-style: none;
border: 1px solid #FF9800;
background: #FFF4EC;
font-family: "Tahoma";
color: #FF3800;
margin: 5px;
padding: 13px;
height: 22px;
cursor: move;
}
</style>
</head>
<body>
<h1>Manual sortable list using jquery:</h1>
<section>
<ul class="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.sortable.js"></script>
<script>
$(function() {
$('.sortable').sortable();
});
</script>
</body>
</html>
0 Comments