0

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/

Little bird
  • 1,106
  • 7
  • 28
  • 58
  • I tried your demo: it wouldn't let me drop in the second div. It let me drag to change the order of the three items in the box, but when I tried dropping them in the "Add your stories here" box they slid back to where they started. (So the problem you mention with the format changing didn't apply since the drag 'n' drop didn't work.) – nnnnnn Nov 07 '12 at 04:58
  • http://jsfiddle.net/coolanuj/7683X/12/ @nnnnnn : please check it here – Little bird Nov 07 '12 at 05:00

1 Answers1

2

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

logical Chimp
  • 996
  • 5
  • 7
  • you are right . What to apply that i 'm wondering. Actually i'm new to HTML .Can u please help me ? Thanx in advance – Little bird Nov 07 '12 at 05:29
  • have you tried *ui.draggable.appendTo( this );* instead of creating a new *li* element? - this would keep all the original *class*, *style*, *id*, and other attributes of the original element. I should add that I'm looking at this from a theoretical PoV - I have no personal experience with Drag & Drop :) – logical Chimp Nov 07 '12 at 12:25