将不同的颜色应用于所选的已排序项目

Question

我正在测试jQuery sortable。

我有一个正在运行的可排序列表，但如何将不同的颜色应用于正在拖动的所选项目？

这与占位符颜色不同。

我希望将css类.ui-state-focus应用于所选项目，如下所示。

我搜索了SO＆amp;谷歌，并尝试了一些事情，但无法让这个工作。

这是我的代码：

  <style>
      #sortable { list-style-type: none; margin: 0; padding: 0; }
      #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
      html>body #sortable li { height: 1.5em; line-height: 1.2em; }
      .ui-state-highlight { height: 1.5em; line-height: 1.2em; border: 3px dashed red; background: yellow; }
      .ui-state-focus { border: 2px dotted orange; background: lime; }
  </style>

  <script>
      $(function() {
        $( "#sortable" ).sortable({
          placeholder: "ui-state-highlight"
        });
        $( "#sortable" ).disableSelection();
      });
  </script>

Answer 1

我刚刚尝试过。

我发现正在拖动的项目添加了类名ui-sortable-helper。

所以你可以在你的css文件中添加几行：

.ui-sortable-helper { // original and wrong code: .ui-sort-helper
  background: red;
  color: green;
}