Answer: This drag and drop function is used to show the text elements on the drop box to highlight.
Example:
The code should be written in html and body tags.
The source code of Jquery should be written in Code
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
Link Should me mentioned in the style sheet to run the function of the effect.
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
The code of the effect is
<style>
#Drag {
width: 150px;
height: 150px;
background: royalblue;
}
#Drop {
position: relative;
left: 250px;
top: 0;
width: 250px;
height: 250px;
background: green;
color: white;
padding: 20px;
}
</style>
<div id="Drop">Written text is dropped her</div>
<div id="Drag">HEllo the text is written in this box</div>
<script>
$("#Drag").draggable();
$("#Drop").droppable({
drop: function () {
alert("dropped");
}
});
</script>
Asked In: While Learning |
Alert Moderator