JQuery - 可拖动DIV在浏览器窗口上的位置调整大小

Question

我在父容器('#draggableIMG')中包含一个超大的DIV元素('#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操作。