title: Jquery UI, Draggable/Droppable Append Clone after Json
body: <p>I have been playing around with this line of code trying to get it to function correctly without success decided to post here, hopefully someone can help.</p>
  
  <p>My issue revolves around JQUERY UI with use of DRAGGABLE / DROPPABLE and Json. Here is my Code:</p>
  
  <pre><code>$('.drag').draggable({
          helper: 'clone'
      });
      $(".drop").droppable({
          drop: function(e, ui) {
              var dataString = 'type='+ui.draggable.clone().find('.type').attr('id')+'&amp;update=update';
              $.ajax({
                  url: 'phphandler.php',
                  type: 'POST',
                  data: dataString,
                  dataType: 'json',
                  success: function(json) {
                      $(this).append(ui.draggable.clone().html(json.Data));
                  },
                  error: function() {
                      alert(ui.draggable.clone().html);
                  }
              });
          }
  });
  </code></pre>
  
  <p>My HTML is essentially: </p>
  
  <pre><code>&lt;div class="drag"&gt;Object&lt;/div&gt;
  &lt;div class="drop"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Pretty much all I'm trying to do is append the clone to drop after the Success or change the html of the clone after the success. </p>
  
  <p>Note: I can append before the Ajax request without a issue but am unable to change the HTML of the clone after success.</p>