javascript - 对选定的已排序元素应用不同的颜色

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