javascript - JQuery - 可拖动 DIV 在浏览器窗口调整大小时超出位置

Question

我有一个超大的 DIV 元素 ('#draggableIMG') 包含在父容器 ('#navScreen') 中。我使用 JQuery 来拖动图像。用户应该移动元素并且元素被限制在容器内。到目前为止，还不错:

但是，当我手动更改浏览器窗口时，图像会移出右下角的位置，从而暴露它覆盖的图像。

下面是我的 JQuery 代码、CSS 代码和 HTML 代码。如何使子 DIV 在调整大小时保持在其父容器的范围内？

HTML

<div id="navScreen" class="navigation-screen">
    <div class="navigation-draggable-image" id="draggableIMG">
         <img src="{{imgSrc}}" alt="" class="responsive-image" />
    </div>
</div>

JQuery

 $(document).ready(function() {

    var parentPos = $('#navScreen').offset();
    var childPos = $('#draggableIMG').offset();
    var top = -(parentPos.top);
    var left = -(parentPos.left);

    $('#draggableIMG').css({ top: top + 'px', left: left + 'px', position: 'absolute', cursor: 'pointer'});

    $('#draggableIMG').draggable({
        drag: function(event, ui) {
            if (ui.position.top >= 0) {
                ui.position.top = 0;
            }
            if (ui.position.left > 0) {
                ui.position.left = 0;
            }
            if (ui.position.left < -(parentPos.left * 2)){
                ui.position.left = -(parentPos.left * 2);
            }
            if (ui.position.top < -(parentPos.top * 2)){
                ui.position.top = -(parentPos.top * 2);
            }
        },
        scroll: false
    });
  });

CSS

#draggableIMG {
    height:200%;
    width:200%;
}

#navScreen {
    height:100%;
    width:100%;
    position:relative;
    overflow:hidden;
}

Answer 1

你可以使用函数:

 $(window).resize(function(){
//you function to here
});

重新计算图像的新位置。

但是，操作此图像的最佳方式是 CSS。您可以使用“Background - Shorthand property”来定义一个 css，而无需 javascript 操作。