Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/69.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 是否更改Rubaxa sortable中拖动列表的背景色?_Javascript_Jquery_Html_Css_Rubaxa Sortable - Fatal编程技术网

Javascript 是否更改Rubaxa sortable中拖动列表的背景色?

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

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

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