Concepts Used: jQuery UI (draggable, droppable)
Features:
- Drag a box and drop into target
<!DOCTYPE html>
<html>
<head>
<title>Drag Drop Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<style>
#drag { width: 100px; height: 100px; background: skyblue; margin: 20px; }
#drop { width: 150px; height: 150px; background: lightgray; margin: 20px; }
</style>
</head>
<body>
<h2>Drag and Drop</h2>
<div id="drag">Drag Me</div>
<div id="drop">Drop Here</div>
<script>
$(document).ready(function(){
$("#drag").draggable();
$("#drop").droppable({
drop: function(event, ui){
$(this).css("background","lightgreen").text("Dropped!");
}
});
});
</script>
</body>
</html>
Explanation:
draggable()makes item movable.droppable()detects drop event.
Leave a Reply