Drag and drop functionality is a powerful feature in web development, allowing users to interact with web applications in an intuitive and user-friendly way. In this tutorial, we'll explore how to implement drag and drop functionality using jQuery.
How to Create Drag and Drop Functionality with jQuery
How to Create Drag and Drop Functionality with jQuery
Learn how to implement drag and drop functionality using jQuery in this step-by-step guide. Drag and drop elements in your web application with ease.
Example
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
Sampel Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop Example</title>
<style>
#sortable-list {
list-style-type: none;
padding: 0;
margin: 0;
}
#sortable-list li {
background-color: #f0f0f0;
padding: 10px;
margin: 5px;
cursor: pointer;
}
.sortable-placeholder {
background-color: #ddd;
border: 2px dashed #666;
height: 30px;
}
</style>
</head>
<body>
<ul id="sortable-list">
<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({
placeholder: "sortable-placeholder",
});
});
</script>
</body>
</html>
jQuery is a popular, lightweight JavaScript library that simplifies web development. It streamlines DOM manipulation, event handling, and AJAX requests, making it easier for developers to create interactive and dynamic web pages. jQuery's wide adoption and rich ecosystem of plugins make it a valuable tool for front-end development.
Leave a Reply