Javascript 是否更改Rubaxa sortable中拖动列表的背景色?
我正在使用列表将项目排序。现在我想更改正在拖动的列表的背景色。 现在,我使用的是文档中提供的ghost类,但是只有文本背景是彩色的,但是我希望整个列表以及编号都有背景色。 任何人都知道如何通过javascript将自定义类添加到可排序表中,以便实现相同的功能Javascript 是否更改Rubaxa sortable中拖动列表的背景色?,javascript,jquery,html,css,rubaxa-sortable,Javascript,Jquery,Html,Css,Rubaxa Sortable,我正在使用列表将项目排序。现在我想更改正在拖动的列表的背景色。 现在,我使用的是文档中提供的ghost类,但是只有文本背景是彩色的,但是我希望整个列表以及编号都有背景色。 任何人都知道如何通过javascript将自定义类添加到可排序表中,以便实现相同的功能 Sortable.create(simpleList{ 鬼课:“鬼” }); .ghost{ 颜色:#fff; 背景色:#c00; } .集装箱{ 文本对齐:居中; } ol{ 显示:内联块; } 一顿美餐 技术改进 胡说八道 Sor
Sortable.create(simpleList{
鬼课:“鬼”
});代码>
.ghost{
颜色:#fff;
背景色:#c00;
}
.集装箱{
文本对齐:居中;
}
ol{
显示:内联块;
}
一顿美餐
技术改进
胡说八道
Sortable.create(simpleList{
鬼课:“鬼”
});代码>
.ghost{
颜色:#fff;
背景色:#c00;
}
.集装箱{
文本对齐:居中;
}
ol{
显示:内联块;
}
.list组{宽度:100%}
一顿美餐
技术改进
胡说八道
Sortable.create(simpleList{
鬼课:“鬼”
});代码>
.ghost{
颜色:#fff;
背景色:#c00;
}
.集装箱{
文本对齐:居中;
}
ol{
显示:内联块;
}
.list组{宽度:100%}
一顿美餐
技术改进
胡说八道
最后,我做到了。请查收。我对您的html
、css
和Jquery
做了一些更改
HTML
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);
});
}
});
最后,我做到了。请查收。我对您的html
、css
和Jquery
做了一些更改
HTML
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);
});
}
});
如果我的理解正确,请为列表组提供100%的宽度。您希望整个ul
具有相同的颜色吗?或者仅仅是正在拖动的特定li
?因为,正如您所看到的,当拖动某个特定的li
时,它会松开编号。因此,请澄清您的问题,如果列表的宽度为100%,我不会放松其编号。只需检查代码片段below@TheDarkKnight我希望li和编号的背景颜色为红色。请查看@alireza的回答如果我的理解正确,请给出100%的宽度。列表组您希望整个ul
具有相同的颜色吗?或者仅仅是正在拖动的特定li
?因为,正如您所看到的,当拖动某个特定的li
时,它会松开编号。因此,请澄清您的问题,如果列表的宽度为100%,我不会放松其编号。只需检查代码片段below@TheDarkKnight我希望li和编号的背景颜色为红色。请查看@alireza的回答这不是他所问的。他要求列表中的数字具有相同的背景色如果列表中的数字具有相同的背景色意味着它不可见。你说的“它不可见”是什么意思?你是说列表样式的数字吗?是的。。。他们的背景颜色应该与列表的li
相同,这不是他所要求的。他要求列表中的数字具有相同的背景色如果列表中的数字具有相同的背景色意味着它不可见。你说的“它不可见”是什么意思?你是说列表样式的数字吗?是的。。。它们的背景色应该与列表的li
@thedarknight ha-ha-ha相同。tnx@alirezasafian非常感谢。你不仅解决了我目前的问题,而且还解决了我本可以面对的另一个问题。我喜欢它。如果您可以将代码发布到堆栈溢出上,这样在JSFIDLE链接中断的情况下,人们也可以在这里找到代码,这将非常有帮助。请将代码添加到代码段中。T@TheDarkKnight哈哈哈。tnx@alirezasafian非常感谢。你不仅解决了我目前的问题,而且还解决了我本可以面对的另一个问题。我喜欢它。如果您可以将代码发布到堆栈溢出上,这样在JSFIDLE链接中断的情况下,人们也可以在这里找到代码,这将非常有帮助。请将代码添加到代码段中。T
Sortable.create(simpleList, {
ghostClass: "ghost",
onEnd: function ( /**Event*/ evt) {
$('.list-group li').each(function (index) {
var newIndex = index + 1 + '.';
$(this).find('.index').html(newIndex);
});
}
});