Item of sortable element loses its CSS styles when it is being dragged? (If appendTo: 'body')

Question

I have a sortable list of items that returns results based on what the user types in the search box. The results always overflows and here i am using the following css for it:

#list { overflow-x: visible; overflow-y: hidden; }

This allows me to have only a vertical scrollbar. I then drag the individual li's that are in the list over to a droppable area. The sortable functionality is added to the list using the JQuery below:

$("#list").sortable({
   connectWith: ".connectedSortable",
   helper: 'clone',
   appendTo: 'body',
   zIndex: 999
});

The reason i use the appendTo: 'body' is to ensure that the item that is being dragged is on top of everything and will not be under the list's other items when being dragged. However, whenever I drag any item from the list, the DIVs that are in the item will have their CSS styling gone.

I understand that this is due to the fact that when the item is dragged, it is appended to 'body' and thus does not have any parent to inherit the original CSS styles.

My question is how do i style the dragged item back to its original styling to make sure it stays the same even if I am dragging/not dragging it? through the events?

EDIT:

Found the reason for the css messing up. It was a random br thrown in between two div's causing it to be interpreted differently when the item was being dragged and appended to the body.

Answer 1

You have two options to sort the problem. One is to create your own helper with the function. This way you can style is any way you want, wrap it in an element, add classes, etc.

The following demo shows the difference, the top one works, the bottom one is broken. http://jsfiddle.net/hPEAb/

$('ul').sortable({
    appendTo: 'body',
    helper: function(event,$item){
        var $helper = $('<ul></ul>').addClass('styled');
        return $helper.append($item.clone());
    }
});

The other option is not to use append:'body' , but to play with zIndex. Your zIndex:999 clearly has no effect, since the default value is 1000. :) The problem with zIndex is that it only matters for siblings, elements within the same parent. So if you have another sortable on your form with a greater zIndex than your current sortable, its items could easily be on top of your dragged one, regardless of the zIndex of your currently dragged item.

The solution is to push your whole sortable on top when dragging starts and restore it when it stops:

$('#mySortable').sortable({
    start: function(){
        // Push sortable to top
        $(this).css('zIndex', 999);
    },
    stop: function(){
        // Reset zIndex
        $(this).css('zIndex', 0);
    }
});

If the original value matters, you can even save the original zIndex with .data() and retrieve it afterwards.

Answer 2

Thank you DarthJDG. I am aware this thread is a little old but I hope to help others that had the same issue I did.

I had to edit your solution a little bit because the styling was off when appending the item to the helper. I ended up just recreating the list element. Just in case others run into the same issue I did.

I added this into the area where I created the sortable.

I took the text out of the sortable and created a new list item with that as text.

Javascript:

       appendTo: 'body',
       helper: function(event,$item){
          console.log(event);
          var $helper = $('<ul class = "styled" id="' + event.originalEvent.target.id + '"><li>' + event.originalEvent.target.innerText + '</li></ul>');
          return $helper;
        }

I was then able to add custom styling to the draggable object, including custom text with out an issue. The styling I ended up using was that of JQuery Smoothness.

CSS:

    .styled li{
      margin-left: 0px;
    }
    .styled{
      cursor:move;
      text-align:left;
      margin-left: 0px;
      padding: 5px;
      font-size: 1.2em;
      width: 390px;
      border: 1px solid lightGrey;
      background: #E6E6E6 url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
      font-weight: normal;
      color: #555;
      list-style-type: none;
    }