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操纵此图像的最佳方法。 您可以使用“ 背景-速记属性 ”来定义CSS，而无需进行JavaScript操作。