缩放目标上的 JQuery UI 可放置悬停类错误

Question

缩放可放置元素时，JQueryUI 错误地向元素添加/删除悬停类：缩放表的两个 'tr' 元素一次获取此类。 有什么办法可以避免吗？

PS bug ticket here

dirty fix here(codepen)

or here(github)

$('div').draggable();
$('tr').droppable({hoverClass:"highlight"});

div {
  display:inline-block;
  padding:3px;
  border:1px solid rgba(200,0,0,.6);
}
table {
  transform:scale(0.5);
  border:1px solid gray;
  padding:0;
  border-collapse: collapse;
}
td {
  padding:5px;
  background: rgba(0,0,150,0.3);
}
tr.highlight td {
  background: rgba(150,0,0,0.8);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>grab me and drag over the table</div>
<table>
  <tr>
    <td>11111111111111111111111</td>
  </tr>
  <tr>
    <td>222222222222222222222</td>
  </tr>
  <tr>
    <td>333333333333333333333</td>
  </tr>
  <tr>
    <td>11111111111111111111111</td>
  </tr>
  <tr>
    <td>222222222222222222222</td>
  </tr>
  <tr>
    <td>333333333333333333333</td>
  </tr>
</table>

Answer 1

实际上transform:scale() 改变元素像素比而不是它在DOM上的实际像素

那么为什么不直接减少td 的font-size 和padding 而不是使用transform

堆栈片段

$('div').draggable();
$('tr').droppable({
  hoverClass: "highlight"
});

div {
  display: inline-block;
  padding: 3px;
  border: 1px solid rgba(200, 0, 0, .6);
}

table {
  border: 1px solid gray;
  padding: 0;
  border-collapse: collapse;
}

td {
  padding: 2px;
  background: rgba(0, 0, 150, 0.3);
  font-size: 10px;
}

tr.highlight td {
  background: rgba(150, 0, 0, 0.8);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>grab me and drag over the table</div>
<table>
  <tr>
    <td>11111111111111111111111</td>
  </tr>
  <tr>
    <td>222222222222222222222</td>
  </tr>
  <tr>
    <td>333333333333333333333</td>
  </tr>
  <tr>
    <td>11111111111111111111111</td>
  </tr>
  <tr>
    <td>222222222222222222222</td>
  </tr>
  <tr>
    <td>333333333333333333333</td>
  </tr>
</table>