大家好，我正在给我的网站做一个图片查看器，核心需求是：当图片被缩放后，拖拽图片时要严格限制在窗口范围内，不能露出任何空白区域。目前踩了好几个坑，想请教下各位开发者大佬：

问题详情 #

1. 现在的代码逻辑是想在图片缩放后启用拖拽，但实际操作时图片完全纹丝不动；
2. 之前我自己写过一段预缩放的逻辑——通过计算窗口和图片的尺寸差，调整容器大小让图片能在窗口内拖拽不露出空白，这个逻辑单独模拟时是有效的，但结合jQuery的.draggable()后发现，它还是默认用图片的原始尺寸计算拖拽范围，导致图片还是能拖出限制区域；
3. 后来参考了一篇旧的技术帖思路（实现带裁剪遮罩的缩放拖拽），把代码套进我的项目后，居然出现了反向拖拽的问题，完全不符合预期。

现有代码片段 #

document.addEventListener("DOMContentLoaded", function() {
    const modal = document.getElementById("imageModal");
    const modalImg = document.getElementById("modalImage");
    const inImg = modalImg.querySelector("img");
    const closeBtn = document.querySelector(".close");

    // 绑定图片点击打开模态框事件
    const imageContainers = document.querySelectorAll(".imgauto, .imgautofull");
    imageContainers.forEach(container => {
        const img = container.querySelector("img");
        if (!img) return;
        container.addEventListener("click", function() {
            modal.style.display = "flex";
            setTimeout(() => modal.classList.add("show"), 10);
            inImg.src = img.src;
            document.body.classList.add("modal-open");
            updateContainer();
        });
    });

    // 关闭模态框逻辑
    closeBtn.addEventListener("click", function() {
        closeModal();
    });
    modal.addEventListener("click", function(e) {
        if (e.target === modal) {
            closeModal();
        }
    });

    let isDragging = false;
    let zoomed = false;

    function closeModal() {
        modal.classList.remove("show");
        inImg.classList.remove('img-zoom');
        disableDrag("#modalImage img");
        isDragging = false;
        zoomed = false;
        setTimeout(() => {
            modal.style.display = "none";
            document.body.classList.remove("modal-open");
        }, 300);
    }

    // 更新容器尺寸适配窗口
    function updateContainer() {
        const ww = window.innerWidth;
        const wh = window.innerHeight;
        modalImg.style.width = ww + 'px';
        modalImg.style.height = wh + 'px';
        const cont = document.getElementById("containerLimit");
        cont.style.width = ww + "px";
        cont.style.height = wh + "px";
    }

    // 启用拖拽的函数（目前存在问题）
    function enableDrag(selector, maskSelector) {
        let $img = $(selector);
        let $mask = $(maskSelector);
        if ($img.length === 0 || $mask.length === 0) {
            console.error("Error: One or both of the elements were not found.");
            return;
        }
        console.log("FUNCTION: [jQuery draggable] USE");
        $img.css({ top: 0, left: 0 });

        // 缓存尺寸
        let maskWidth = $mask.width();
        let maskHeight = $mask.height();
        let imgWidth = $img.width();
        let imgHeight = $img.height();

        // 原本想计算拖拽边界但中途遇到问题
        // let minLeft = maskWi...
        $(selector).draggable({
            // 尝试过containment: "window"或自定义边界都不对
            drag: function(event, ui) {
                // 手动限制位置的尝试，效果不佳
                // if (ui.position.top > 0) ui.position.top = 0;
                // var maxtop = ui.helper.parent().height() - ui.helper.height();
                // if (ui.position.top < maxtop) ui.position.top = maxtop;
            }
        });
    }

    // 禁用拖拽的函数
    function disableDrag(selector) {
        $(selector).draggable("destroy");
    }
});

我试过的解决方案 #

• 手动计算图片与窗口的尺寸差，放大容器让图片能在范围内拖拽，但jQuery draggable不识别动态修改后的容器尺寸；
• 参考裁剪遮罩的思路实现缩放拖拽，结果出现反向拖拽的bug；
• 在drag事件里手动修正图片位置，但要么限制完全不生效，要么图片被卡死无法拖拽。

请问有没有大佬能指点一下，怎么实现缩放后拖拽图片时，图片始终被限制在窗口内、不会露出空白区域的功能？感激不尽！