更改Rubaxa中可拖拽列表的背景顏色排序？

Question

我使用Rubaxa sortable來製作可以排序的列表項。現在我想更改被拖動列表的背景顏色。 現在我使用文檔中提供的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

最後，我做到了。請檢查this。我在您的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>