body设置zoom后jQuery UI Sortable拖拽区域计算异常求助

问题 #

为body设置CSS zoom属性后，jQuery UI Sortable组件拖拽定位异常：仅左侧区域可正常拖拽，右侧空白区域无法触发拖拽操作。

问题截图 #

核心问题点 #

1. zoomScale获取的是字符串类型（如"1.3"），直接参与数学计算会导致偏移量计算错误
2. 表格布局异常：td设置min-width:100%导致容器宽度未覆盖右侧区域，拖拽检测范围受限
3. 拖拽坐标计算逻辑未完全适配缩放比例，导致helper位置偏移

修复代码 #

JavaScript #

$(function () {
    // 将zoom值转为数值类型，默认值为1
    var zoomScale = parseFloat($("body").css("zoom")) || 1;
    
    $("#sortable").sortable({
        sort: function (e, ui) {
            // 计算鼠标拖拽的偏移量（基于缩放后的页面坐标）
            var deltaX = ui.position.left - ui.originalPosition.left;
            var deltaY = ui.position.top - ui.originalPosition.top;
            
            // 转换为实际缩放后的偏移量
            var adjustedX = deltaX / zoomScale;
            var adjustedY = deltaY / zoomScale;
            
            // 修正helper的位置，适配缩放后的容器坐标
            ui.helper.css({
                left: ui.originalPosition.left + adjustedX - ui.item.parent().offset().left,
                top: ui.originalPosition.top + adjustedY - ui.item.parent().offset().top
            });
        },
        // 限制拖拽范围在目标容器内
        containment: "#sortable"
    });
});

CSS #

.ui-sortable-placeholder,
.ui-sortable-helper {
    visibility: visible !important;
    background-color: black !important;
    width: 100% !important; /* 确保占位符/helper填满容器宽度 */
}
.ui-sortable-placeholder td,
.ui-sortable-helper td {
    background-color: aqua;
}

table {
    width: 100%; /* 让表格占满父容器宽度 */
    border-collapse: collapse; /* 修正原代码的拼写错误，合并表格边框 */
}
td {
    padding: 0;
    border: solid 1px #ddd;
    /* 移除min-width:100%，避免td宽度异常导致容器范围缩小 */
}
body {
    zoom: 1.3;
}

HTML #

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />    
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://github.com/borbit/jquery.viewport/raw/master/jquery.viewport.js"></script>
<script type="text/javascript" src="https://github.com/borbit/jquery.scraggable/raw/master/jquery.scraggable.js"></script>

<table>
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tbody id="sortable">
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$80</td>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$80</td>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$180</td>
        </tr>
    </tbody>
</table>

修复说明 #

1. 类型转换：将zoomScale转为数值类型，确保偏移量计算准确
2. 布局修正：移除td的min-width:100%，设置表格width:100%，让容器覆盖整个可视区域
3. 坐标适配：重新计算拖拽偏移量，将缩放后的页面坐标转换为容器内的实际坐标
4. 范围限制：添加containment选项，确保拖拽操作仅在目标容器内生效

内容的提问来源于stack exchange，提问作者Vijay Dhanvai