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

Question

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

PS错误票在这里

脏修复在这里（codepen）

或这里（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>