title: Issue in Dragging and Dropping elements into TEXT BOX on HTML page?
body: <p>I want to drag and drop element form a Div to another Div's textbox.
  <img src="https://i.stack.imgur.com/w7kDm.png" alt=""></p>
  
  <p>As shown in the above image, there is div1 and div2 from which i have to drag the text/word and drop to the TEXT BOX in DIV2 </p>
  
  <p>what is the way to create this function into html page of my project?</p>
  
  <p>EDIT :: 18_7_2014</p>
  
  <p>After implementing Pranav's solution my code like below</p>
  
  <pre><code> &lt;head&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  $(document).ready(function() {
      $(".draggable").draggable({
          revert: true,
          helper: 'clone',
          start: function(event, ui) {
              $(this).fadeTo('fast', 0.5);
          },
          stop: function(event, ui) {
              $(this).fadeTo(0, 1);
          }
      });
  
      $("#droppable").droppable({
          drop: function(event, ui) {
              this.value = $(ui.draggable).text();
          }
      });
  });
  
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
   &lt;body&gt;
  
   &lt;div id="sub_cag" style="display:none; margin-left:35px; margin-top:25px; font-family:Arial, Helvetica, sans-serif;"&gt;
  
  
  &lt;span class="draggable"   &gt;sub&lt;/span&gt;&lt;br&gt;
  
   &lt;span class="draggable" &gt;sub&lt;/span&gt;&lt;br&gt;
  
   &lt;span class="draggable"   &gt;sub&lt;/span&gt;&lt;br&gt;
  
   &lt;span class="draggable" &gt;sub&lt;/span&gt;&lt;br&gt;
  
   &lt;span class="draggable"   &gt;sub&lt;/span&gt;&lt;br&gt;
  
   &lt;span class="draggable" &gt;sub&lt;/span&gt;&lt;br&gt;
  
   &lt;/div&gt;   
  
   &lt;div id="droppableHolder" style=" height:400px; width:580px; margin:10px; "&gt;
  
   &lt;div style="height: 250px; width:580px; margin:0px;"&gt;
  
  &lt;div style=" height:60px; width:250px; margin-top:50px; float:; margin-left:0px;"&gt;
  
   &lt;label for="departmant_name" style="margin-left:0px; font-size: 12px;;font-weight:500;font-family:Arial, Helvetica, sans-serif;"&gt;Department Name&lt;/label&gt;
   &lt;input  type="text" maxlength="25"  id="droppable" style="width:200px;float:left;font-size: 12px;font-size: 12px;height: 15px; border-radius:5px; border: solid #dddddd 2px; font-size:12px;"&gt;
  &lt;/div&gt;
  
  &lt;div style=" height:60px; width:250px; margin-top:0px; float:left; margin-left:0px;"&gt;
  
   &lt;label for="discription" style="margin-left:0px; font-size: 12px;;font-weight:500;font-family:Arial, Helvetica, sans-serif;"&gt;Discription&lt;/label&gt;
   &lt;input  type="text" maxlength="25"  id="droppable" style="width:200px;font-size: 12px;font-size: 12px;height: 40px; border-radius:5px; border: solid #dddddd 2px; font-size:12px;"&gt;
  &lt;/div&gt;
  
  &lt;div style=" height:60px; width:220px; margin-top:-60px; float:right; margin-left:0px;"&gt;
  
   &lt;label for="sub_department" style="margin-left:0px; font-size: 12px;;font-weight:500;font-family:Arial, Helvetica, sans-serif;"&gt;Sub Department&lt;/label&gt;
   &lt;input  type="text" maxlength="25" id="droppable"  style="width:200px;font-size: 12px;font-size: 12px;height: 15px; border-radius:5px; border: solid #dddddd 2px; font-size:12px;"&gt;
   &lt;button value="ADD"   style="height:20px; width:40px; margin-top:px;"&gt; &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>When browser is trying to execute this line $(document).ready(function().
  this "$ is not defined" error is generated  by console. </p>