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

Question

我正在测试jQuery sortable。

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

这与占位符颜色不同。

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

我搜索了 SO 和 Google，并尝试了一些方法，但无法使其正常工作。

这是我的代码：

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