在Rubaxa可排序列表中更改拖动列表的背景颜色

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

本文关键字：列表 拖动 背景 颜色 Rubaxa 排序      更新时间：2023-09-26

我使用Rubaxa sortable使列表项可排序。现在我想改变被拖动列表的背景颜色。现在我正在使用文档中可用的鬼类，但只有文本背景是彩色的，但我希望整个列表以及编号都有一个背景色。有没有人知道我如何通过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>

最后，我做到了。请检查一下。我对你的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);
         });
     }
 });


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>

相关文章：