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

Question

当缩放droppable元素时，JQueryUI会错误地将hover类添加/删除到元素：two＆＃39; tr＆＃39;缩放表的元素立即获得此类。 有什么方法可以避免这种情况吗？

PS bug ticket here

dirty fix here(codepen)

or here(github)

＆＃13;

＆＃13;

JToken

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

实际上transform:scale()更改元素像素比率而不是DOM上的实际像素

那么为什么不减少font-size的{​​{1}}和padding而不是使用td

Stack Snippet

＆＃13;

＆＃13;

transform

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;