jQuery droppables - Change element on drop

Question

I\'m a bit new to jQuery and hope somebody can help me out.

I\'m trying to change an element (li) to another element (div) after the (li) has been dropped.

Sampl

Answer 1

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("
Some content
");
}

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("
Some content
");
        $("#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.