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操作。