javascript - 更改 Rubaxa sortable 中拖动列表的背景颜色？

Question

我正在使用 Rubaxa sortable使列表项可排序。现在我想更改被拖动列表的背景颜色。现在我正在使用文档中可用的幽灵类，但只有文本背景是彩色的，但我希望整个列表以及编号都具有背景色。谁能知道如何通过 javascript 将自定义类添加到 sortable 中，以便实现相同的目的。

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

查询

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