jQuery UI sortable
The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. This method performs sortability action based upon an operation string passed as the first parameter.By default, sortable items share draggable properties .
$( "#mySortable" ).sortable();
<ul id="mySortable">
<li>Sortable-1</li>
<li>Sortable-2</li>
<li>Sortable-3</li>
<li>Sortable-4</li>
<li>Sortable-5</li>
</ul>
Browser View- Sortable-1
- Sortable-2
- Sortable-3
- Sortable-4
- Sortable-5
<html>
<head>
<title>jQuery UI sortable example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#mySortable" ).sortable();
$( "#mySortable" ).disableSelection();
});
</script>
</head>
<body>
<ul id="mySortable">
<li>Sortable-1</li>
<li>Sortable-2</li>
<li>Sortable-3</li>
<li>Sortable-4</li>
<li>Sortable-5</li>
</ul>
</body>
</html>
Related Topics