When a object is dragged and dropped from one div to another, the format in li gets changes to text only. I want it in the same format i.e 'li' after droping it.

 $(function() {

     $( "#catalog ul" ).sortable({
         zIndex: 10000,
            revert: true
        });
     $( "#catalog" ).accordion();
     $( "#catalog ul" ).draggable({
            appendTo: "body",
            helper: "clone",
            zIndex: 10000
        });

      $( "#dialogIteration ol" ).droppable({

            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",

            drop: function( event, ui ) {
                $( this ).find( ".placeholder" ).remove();
                $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
            }
        }).sortable({
            items: "li:not(.placeholder)",
            sort: function() {

                // gets added unintentionally by droppable interacting with sortable
                // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
                $( this ).removeClass( "ui-state-default" );
            }
        });


        $( "ul, li" ).disableSelection();
        $("#dialogIteration").dialog();
    });

Demo: http://jsfiddle.net/coolanuj/7683X/7/