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

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>