[英]Change the background color of the dragged list in Rubaxa sortable?
我正在使用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>
最后,我做到了。 请检查一下 。 我对您的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.