Change the background color of the dragged list in Rubaxa sortable?

Question

I'm using Rubaxa sortable to make a list items sortable. Now i want to change the background color of the list being dragged. For now i'm using the ghost class available in the documentation but in that only the text background is colored but i want the whole list along with the numbering to have a background-color. can anyone know how can i add a custom classes to the sortable through javascript so that i can achieve the same.

  Sortable.create(simpleList, { ghostClass: "ghost" }); 

 .ghost { color: #fff; background-color: #c00; } .container { text-align: center; } ol { display: inline-block; } 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="http://rubaxa.github.io/Sortable/Sortable.js"></script> <div class="container"> <ol id="simpleList" class="list-group"> <li>A Good Meal</li> <li>A technical Improvement</li> <li>Nonsense</li> </ol> </div> 

Answer 1

Finally, I did. Please check this . I did some changes in your html , css and Jquery .

HTML

<div class="container">
    <ol id="simpleList" class="list-group">
        <li><span class="index">1.</span>A Good Meal</li>
        <li><span class="index">2.</span>A technical Improvement</li>
        <li><span class="index">3.</span>Nonsense</li>
    </ol>
</div>

CSS

.ghost {
    color: #fff;
    background-color: #c00;
    position: relative;
}
.index {
    display: inline-block;
    height: 100%;
    width: 10px;
    margin-right: 10px;
    background: inherit;
    color: inherit;
}
.container {
    text-align: center;
}
ol {
    display: inline-block;
    list-style:none;
    text-align: left;
}

Jquery

 Sortable.create(simpleList, {
     ghostClass: "ghost",
     onEnd: function ( /**Event*/ evt) {
         $('.list-group li').each(function (index) {
             var newIndex = index + 1 + '.';
             $(this).find('.index').html(newIndex);
         });
     }
 });

Answer 2

 Sortable.create(simpleList, { ghostClass: "ghost" }); 

 .ghost { color: #fff; background-color: #c00; } .container { text-align: center; } ol { display: inline-block; } .list-group{width:100%} 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="http://rubaxa.github.io/Sortable/Sortable.js"></script> <div class="container"> <ol id="simpleList" class="list-group"> <li>A Good Meal</li> <li>A technical Improvement</li> <li>Nonsense</li> </ol> </div>