对选定的已排序项目应用不同的颜色

Question

我正在测试jQuery sortable。

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

这与占位符颜色不同。

我希望将 css class .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;
}