Get started with jquery-sortablejs CDN
MIT licensed
JQuery SortableJS is a library for implementing sortable functionality on HTML elements.
Tags:- sortable
- jQuery
- drag
- drop
- draggable
- sort
- reordering
Stable version
Copied!
How to start using jquery-sortablejs CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with jquery-sortablejs CDN - cdnhub.io</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" referrerpolicy="no-referrer" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" referrerpolicy="no-referrer"></script>
<script src="https://cdn.cdnhub.io/jquery-sortablejs/1.6.1/jquery-sortable.js"></script>
<script>
$(function() {
$("#sortable").sortable({
axis: "y",
handle: ".handle",
stop: function(event, ui) {
console.log("Sorting finished.");
}
});
$("#sortable").disableSelection();
});
</script>
<style>
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
width: 600px;
border: 1px solid #ccc;
border-radius: 4px;
}
#sortable li {
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.handle {
width: 30px;
height: 30px;
background-color: #f1c40f;
border-radius: 50%;
position: absolute;
right: 0;
top: 0;
cursor: move;
}
</style>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default">
<div class="handle"> </div>
Item 1
</li>
<li class="ui-state-default">
<div class="handle"> </div>
Item 2
</li>
<li class="ui-state-default">
<div class="handle"> </div>
Item 3
</li>
</ul>
</body>
</html>
Copied!
Copied!