jquery draggable +sortable with custom html on drop event?

Question

Change html when drop element in droppable area.

Something like this: http://the-stickman.com/files/jquery/draggable-sortable.html

But when I drop element change placed html.

Other Example: I have 2 lists first draggable list and second droppable list, when i drag element from a first list and i drop this element into a second list, the element will be cloned to the second list

dragging:

<a href="#">test</a>

drop:

<a href="#">test</a>

i want to change this html to

dragging:

<a href="#">test</a>

drop:

<div class="toggle"><a href="#">test</a></div>

Answer 1

Check this DEMO http://jsfiddle.net/yeyene/7fEQs/8/

You can customize your dropped element as you wish.

$(function() {
    $( "#draggable li" ).draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });

    $( "#sortable" ).sortable({
        revert: true,
        receive: function(event, ui) {
            var html = [];
            $(this).find('li').each(function() {
                html.push('<div class="toggle">'+$(this).html()+'</div>');
            });
            $(this).find('li').replaceWith(html.join(''));
        }
    });
});