Geek asks and answers

Does an element of a sortable element lose CSS styles when you drag it? (If appendTo: 'body')

I have a sorted list of items that returns results based on what the user enters in the search box. The results are always crowded, and here I use the following css for this:

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

This allows me to have only a vertical scrollbar. Then I drag and drop individual sheets that are in the list into the area with the option to delete. Grouped functionality is added to the list using jQuery below:

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

I use appendTo: 'body' to ensure that the element that is being dragged is on top of everything and will not be below the list of other elements when dragging. However, whenever I drag any item from the list, the DIVs that are in the item will have CSS styles.

I understand that this is due to the fact that when an element is dragged, it is added to the 'body' and, therefore, does not have a parent element to inherit the original CSS styles.

My question is, how can I drag an item back to its original style to make sure that it stays the same even if I drag / not drag it? through events?

EDIT:

css. br, div, -, .

+3
2

. - . , , , , ..

, , . http://jsfiddle.net/hPEAb/

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

- append:'body', zIndex. zIndex:999 , 1000.:) zIndex , , . , zIndex, , , zIndex .

, , , :

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

, zIndex .data() .

+4

DarthJDG. , , , , .

, . . , .

, .

.

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

, - . , , 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;
    }
0

More articles:


All Articles