Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

在Rubaxa中可以排序拖动列表的背景颜色吗？

2 个答案: