<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>

So, what you want is to keep your original list intact and drop list items into dropEl?
How about this:
```
```
drop: function(ev,ui) {
     $(this).append("<div>Some content</div>");
}
```
```
Or, if you want to replace the list elements with a div element and also have the div element draggable, you could try this:
```
```
drop: function(ev, ui) {
        $(ui.draggable).replaceWith("<div>Some content</div>");
        $("#inputEl>div").draggable({ 
            revert: true, 
            opacity: 0.4,
            helper: "clone"
        });
    }
```
```
The original draggable call only makes items draggable at the time it is called.  If you change or add elements and want them to be draggable, you will need to call the draggable() function again.