When Drag a object from one div to another , forma

Question

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 and style 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/

Answer 1

I am assuming you are wanting the dropped element in the second div to retain its formatting? If so, Looking at your jsfiddle, I can see two potential issues.

1) in your droppable definition, you create a new li element, but you don't copy across the inline styles (so you lose the colour definition, etc)

2) in your CSS, you only apply the styles to the ul in the first div, and not to the ol in the second div