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 
    }); 
    }); 

あなたが機能を使用することができます

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

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

Answer 1

CSS：

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

イメージの新しい位置を再計算します。

ただし、この画像を操作する最も良い方法は、 CSSです。 "Background - Shorthand property"を使用すると、JavaScriptを使用せずにCSSを定義できます。