jQuery-可拖动DIV在浏览器窗口调整大小时不正确

Question

I have an oversized DIV element ('#draggableIMG') contained within a parent container ('#navScreen') . I use JQuery to drag the image. The user is supposed to move the element and the element is constrained within the container. So far, so good:

However, when I manually change the browser window the image moves out of position on the bottom-right corner, exposing the image it overlays.

Below is my JQuery code, CSS code and HTML code. How can I make the child DIV stay within the confines of its parent container upon resize?

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

You can use the function:

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

To recalculate the new position of image.

However, the best way to manipulate this image by way of CSS. You can use the " Background - Shorthand property " to define a css, without javascript manipulation.