title: Using jQuery UI drag-and-drop: changing the dragged element on drop
body: <p>When using jQuery UI draggables and droppables, how do you change the dragged-and-dropped element on drop? I am trying to drag one DIV to another sortable DIV. On drop, I'd like to change the classes on the dropped DIV and change its innerHTML content.</p>
  
  <p>After reading various StackOverflow questions, my code looks like this:</p>
  
  <pre><code>$(".column").droppable({
    accept: '.element-dragging', 
      drop: function(event, ui) {
          if ($(ui.draggable).hasClass("elemtxt")) {
              $(ui.draggable).replaceWith('&lt;div class="element element-txt"&gt;This text box has been added!&lt;/div&gt;');
          }
      }
  })
  </code></pre>
  
  <p>It's not working for me. :-(</p>
  
  <p>A full copy of my code is located at <a href="http://www.marteki.com/jquery/bugkilling.php" rel="noreferrer">http://www.marteki.com/jquery/bugkilling.php</a>.</p>