title: jquery ui drag a button in a textbox
body: <p>I am using a Php With Jquery Ui. Records Are Comming in the a textbox. Each textbox only contains a single alphabet. now i have to drag this textbox and put the value of this textbox into another textbox..</p>
  
  <p>This is the php code fetching the each record of alphabet in a single textbox
      
  
  <pre><code>    if($_POST['fetch'])
      {
          $code_words = $_POST['code_words'];
  
          $count = mysql_query("SELECT COUNT(*) FROM tbl_words WHERE id = '$code_words'")or die("query failed");  
          $row_count = mysql_fetch_row($count);
          if($row_count[0] &gt; 0)
          {
              $sql = mysql_query("SELECT word FROM tbl_words WHERE id = '$code_words'")or die("query failed");    
              $row = mysql_fetch_array($sql);
              $word = $row['word'];
  
  echo "&lt;div id='source'&gt;";           
              echo "&lt;div class='fetched_words'&gt;"; 
              echo "&lt;span id='word'&gt;".$word."&lt;/span&gt;";
              if($_POST['fetch'])
              {
                  $code_words = str_split($word); 
  
      for($x = 0 ; $x &lt; count($code_words); $x++) {
  
  echo "&lt;input index='$x' maxlength='1' class='draggable' type='button' value='$code_words[$x]'/&gt;";
  
          }
  
              }
  
              echo "&lt;/div&gt;";
  
              }
      }
  
  ?&gt;
  </code></pre>
  
  <p>After that i have drag the textbox and it is dragging but when i am dropping in the textbox it is not working</p>
  
  <p>
      
      
          Example- drag textbox value in an another textbox</p>
  
  <pre><code>    &lt;link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/themes/icon.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/demo.css"&gt;
      &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.easyui.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          $(function() {
              $(".draggable").draggable({
                  appendTo: "head",
                  helper: "clone",
                  cursor: "move",
                  revert: "invalid"
              });
  
              initDroppable($("#dropdiv"));
              function initDroppable($elements) {
                  $elements.droppable({
                      activeClass: "state-default",
                      hoverClass: "drop-hover",
  
  
                      over: function(event, ui) {
                          var $this = $(this);
                      },
                      drop: function(event, ui) {
                          var $this = $(this);
                          if ($this.val() == '') {
                              $this.val(ui.draggable.text());
                          } else {
                              $this.val($this.val() + "," + ui.draggable.text());
                          }
                      }
                  });
              }
          });
      &lt;/script&gt;
  
      &lt;style type="text/css"&gt;
          #drop-hover
          {
              border: 2px solid #bbb;
          }
  
          .draggable {
      width: 250px;
      height: 20px;
      background-color: #e6eaff;
      border: 2px solid #3399cc;
      margin-bottom: 1em;
      padding: 4px;
      cursor: default;
  }
          #dragdiv
          {
              width: 180px;
              height: 400px;
              float: left;
          }
          #dropdiv
          {
              width: 380px;
              height: 40px;
              float: right;
              margin-right: 10px;
          }
          #dropdiv li
          {
              padding-left: 10px;
          }
          #maindiv
          {
              width: 580px;
              height: 300px;
              border: 2px solid #bbb;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;FETCH&lt;/h1&gt;
  &lt;form action="test.php" method="post"&gt;
      CODE WORDS: &lt;input type="text" name="code_words" /&gt;
      &lt;input type="submit" name="fetch" value="FETCH" /&gt;
  &lt;/form&gt;
  
              &lt;span&gt;Drop contact to 'To' list'&lt;/span&gt;&lt;/h3&gt;
          &lt;input id="dropdiv" type="text" style="overflow:scroll"  /&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>