Drag and drop events in Jquery UI
<p>I am learning jQuery draggable and droppable UI in that I am facing problem of handling events,</p>

<p>here is the my code</p>

<p>CSS:</p>

<pre><code>#draggable 
{
   width: 100px;
   height: 100px;
   background: blue;
}
#droppable 
{
    position: absolute;
    left: 250px;
    top: 0;
    width: 125px;
    height: 125px;
    background: red;
    color: #fff;
    padding: 10px;

}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery-ui.min.js"&gt;&lt;/script&gt;

&lt;div id="droppable"&gt;Drop here
&lt;label id="l1"&gt;&lt;/label&gt;
&lt;/div&gt;
&lt;div id="draggable"&gt;&lt;input type="text" style="width: 90px;" id="t1"&gt;&lt;/div&gt;
</code></pre>

<p>javascript:</p>

<pre><code>var text;
$( "#draggable").draggable({
    revert: true , 

  stop: function(){
      alert("over");

      document.getElementById('t1').value  = "";
  }

});
$( "#droppable" ).droppable({
  drop: function() {
    alert( "dropped" );
    text = document.getElementById('t1').value;
    console.log(text);
    document.getElementById('l1').innerHTML = text;
 }
});
</code></pre>

<p>Here when draggable div drops, I want to set the text that is in textbox of draggable to label that is in droppable div but some how text is not set.</p>

<p>So please help me with this, I know I have make silly mistake in this but I am able to find it.</p>

<p>Thank you so much for your time.</p>