2

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

Sample Code here

Jehof
  • 34,674
  • 10
  • 123
  • 155
Little bird
  • 1,106
  • 7
  • 28
  • 58

1 Answers1

0

The style of item <li class="ui-state-default"/> in original list is defined by CSS rules:

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  border: 1px solid lightGrey;
  background: #E6E6E6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
  font-weight: normal;
  color: #555;
}

...

After you dragged it to new container, and drop it, you created another element to hold the content $("<li></li>").text(ui.draggable.text()) which doesn't have the same className as the original element, so the style is ripped off.

You can either fix it by changing it to 

$('<li class="ui-state-default" />').text(ui.draggable.text()).appendTo( this )
xiaoyi
  • 6,641
  • 1
  • 34
  • 51
  • @xiayi : Thanx for answering me . But i tried your code, its not working for me . I'vl be very thankful to you if you try your code into my sample code given above and then answer me :) Thanx in advance :) – Little bird Nov 14 '12 at 08:06
  • 1
    oops, my code above has some quote issue, here is the demo http://jsfiddle.net/7683X/58/ – xiaoyi Nov 14 '12 at 08:13