jQueryUI Droppable缩放目标hover类Bug：表格多<tr>同时获该类

这个问题确实是jQuery UI处理缩放后droppable元素时的一个已知bug——当容器通过CSS transform: scale() 缩放后，jQuery UI的hover检测逻辑没有考虑缩放比例对坐标计算的影响，导致鼠标仅在一个<tr>上时，多个相邻<tr>会同时被误判为hover状态，从而错误添加ui-state-hover类。

下面是可行的解决办法：

临时修复方案 #

核心思路是重写jQuery UI Droppable的两个核心方法，让坐标计算适配元素的缩放比例：

// 重写_position方法，记录元素的实际缩放比例
$.ui.droppable.prototype._position = function() {
    var position = this.element.offset(),
        elementRect = this.element[0].getBoundingClientRect(),
        scaleX = elementRect.width / this.element.width(),
        scaleY = elementRect.height / this.element.height();

    this.position = {
        left: position.left,
        top: position.top,
        width: this.element.width() * scaleX,
        height: this.element.height() * scaleY,
        scaleX: scaleX,
        scaleY: scaleY
    };
};

// 重写_over方法，基于缩放比例修正鼠标位置判断
$.ui.droppable.prototype._over = function(event) {
    var draggable = $.ui.ddmanager.current;
    if (!draggable || draggable.currentItem !== this.element) {
        var mouseX = event.pageX,
            mouseY = event.pageY,
            pos = this.position;

        // 把页面坐标转换为元素内部的缩放后坐标
        var scaledMouseX = (mouseX - pos.left) / pos.scaleX,
            scaledMouseY = (mouseY - pos.top) / pos.scaleY;

        // 仅当鼠标确实在元素范围内时，触发hover状态
        if (scaledMouseX >= 0 && scaledMouseX <= this.element.width() && 
            scaledMouseY >= 0 && scaledMouseY <= this.element.height()) {
            this._activate.call(this, event);
            this.element.addClass("ui-state-hover");
        }
    }
};

使用这个修复后，jQuery UI会正确计算缩放后元素的实际范围，确保只有鼠标真正悬停的<tr>才会添加ui-state-hover类。

后续建议 #

这个问题已经在官方的bug工单中被追踪，你可以关注jQuery UI的版本更新，等待官方推出正式的修复方案，届时可以替换掉临时修复代码。

内容的提问来源于stack exchange，提问作者Yuri Gor