How to use Jquery Drag and Drop?

by Thamimul Ansari Jquery

a simple example of drag-and-drop functionality using jQuery.

<!DOCTYPE html>
<html>

<head>
<title>jQuery Drag and Drop Example</title>
<style>
.sortable {
list-style-type: none;
padding: 0;
margin: 0;
}

li {
background-color: #f2f2f2;
padding: 10px;
border: 1px solid #ccc;
margin: 5px;
cursor: pointer;
}
</style>
</head>

<body>
<ul id="sortable-list" class="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$("#sortable-list").sortable({
update: function (event, ui) {
var order = $("#sortable-list").sortable("toArray");
console.log("New order:", order);
}
});
$("#sortable-list").disableSelection();
});
</script>
</body>

</html>