Question

我正在尝试在可排序的表格中为占位符的背景颜色着色。但我不能让它发挥作用。我已经尝试过用css文件中的类来设置样式的常用方法，但没有成功。

placeholder: 'ui-sortable-placeholder',

CSS

.ui-sortable-placeholder{
        background-color: red;
}

也没有直接在javascript中设计样式。

start: function(e, ui) { 
ui.placeholder.css({
  "visibility":"visible",
  "background-color": "red"
});

}，

首选结果将是直接在javascript中的解决方案

var fixHelper = function(e, ui) {
  ui.children().each(function() {
    $(this).width($(this).width());
  });
  return ui;
};

$("table tbody").sortable({
  axis: 'y',
  containment: 'parent',
  revert: true,
  helper: fixHelper,
  start: function(e, ui) { 
    ui.placeholder.css({
      "visibility":"visible",
      "background-color": "red"
    });
  },

}).disableSelection();

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 500px;
}

td,
th {
  border: 1px solid #cacaca;
  text-align: left;
  padding: 8px;
  background-color: #f5f5f5;
}

th {
  background-color: #dce0e3;
}

.ui-sortable-placeholder {
  background-color: #fff;
  outline: 0px dashed black;
  padding: 0px 0px;
}

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>


<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus </td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari </td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </tbody>
</table>

Answer 1

试试这个：

＆＃13;

var fixHelper = function(e, ui) {
  ui.children().each(function() {
    $(this).width($(this).width());
  });
  return ui;
};

$("table tbody").sortable({
  axis: 'y',
  containment: 'parent',
  revert: true,
  helper: fixHelper,
  placeholder: "my-ui-placeholder"
}).disableSelection();

＆＃13;

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 500px;
}

td,
th {
  border: 1px solid #cacaca;
  text-align: left;
  padding: 8px;
  background-color: #f5f5f5;
}

th {
  background-color: #dce0e3;
}

.my-ui-placeholder {
  outline: 0px dashed black;
  padding: 0px 0px;
}

.my-ui-placeholder td {
  background-color: #fff;
  border: 0;
}

＆＃13;

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus </td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari </td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </tbody>
</table>

＆＃13;

请注意，此内容已添加到tr，其中包含td个元素。所以你的CSS必须适用于两者。

如何在jquery-ui sortable中更改占位符的背景颜色

1 个答案: