title: jQuery droppables - Change element on drop
body: <p>I'm a bit new to jQuery and hope somebody can help me out.</p>
  
  <p>I'm trying to change an element (li) to another element (div) after the (li) has been dropped.</p>
  
  <p>Sample code:</p>
  
  <pre><code>$("#inputEl&gt;li").draggable({ 
      revert: true, 
      opacity: 0.4,
      helper: "clone"
  });
  $("#dropEl")
      .droppable({ 
          accept: ".drag",
          hoverClass: "dropElhover",
          drop: function(ev, ui) {
              // change the li element to div here
          }
  });
  </code></pre>
  
  <p>The problem is, when i use</p>
  
  <pre><code>drop: function(ev, ui) {
       $(ui.draggable).replaceWith("&lt;div&gt;Some content&lt;/div&gt;");
  }
  </code></pre>
  
  <p>the original draggable elements will be disabled when the function above is triggered.</p>
  
  <p>I'm using the latest jQuery and jQuery UI stable versions.</p>