更改Rubaxa中可拖動列表的背景顏色？

Question

我正在使用Rubaxa可排序以使列表項可排序。 現在我想更改被拖動列表的背景顏色。 現在，我正在使用文檔中提供的ghost類，但是僅文本背景是彩色的，但是我希望整個列表以及編號具有背景色。 誰能知道我如何通過javascript將自定義類添加到可排序類，以便實現相同目的。

  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

最后，我做到了。 請檢查一下 。 我對您的html ， css和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>