In Jquery how do we use the effect of drag and drop function in html?

 Posted by Vivek.Ramapuram on 9/1/2014 | Category: jQuery Interview questions | Views: 515 | Points: 40
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 

Comments or Responses

Login to post response