How do I implement drag and drop functionality with jQuery

To implement drag and drop functionality using jQuery, you can utilize the jQuery UI library, which provides a user-friendly way to achieve this. Below is an example that demonstrates how to create draggable and droppable elements.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Drag and Drop Example</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <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.min.js"></script> <script> $(function() { $(".draggable").draggable(); $(".droppable").droppable({ drop: function(event, ui) { $(this).addClass("ui-state-highlight") .find("p") .html("Dropped!"); } }); }); </script> <style> .draggable { width: 100px; height: 100px; background-color: #3498db; color: white; text-align: center; line-height: 100px; cursor: move; } .droppable { width: 150px; height: 150px; background-color: #2ecc71; color: white; text-align: center; line-height: 150px; } .ui-state-highlight { background-color: #f39c12; } </style> </head> <body> <div class="draggable">Drag me</div> <div class="droppable"><p>Drop here</p></div> </body> </html>

drag and drop jQuery jQuery UI web development

Related Questions

How do I avoid rehashing overhead with std::set in multithreaded code?

How do I find elements with custom comparators with std::set for embedded targets?

How do I erase elements while iterating with std::set for embedded targets?

How do I provide stable iteration order with std::unordered_map for large datasets?

How do I reserve capacity ahead of time with std::unordered_map for large datasets?

How do I erase elements while iterating with std::unordered_map in multithreaded code?

How do I provide stable iteration order with std::map for embedded targets?

How do I provide stable iteration order with std::map in multithreaded code?

How do I avoid rehashing overhead with std::map in performance-sensitive code?

How do I merge two containers efficiently with std::map for embedded targets?