JQuery - Draggable DIV out of Position auf Browser-Fenster Größe ändern

Question

Ich habe ein übergroßes DIV-Element ('#draggableIMG') in einem übergeordneten Container enthalten ('#navScreen'). Ich benutze JQuery, um das Bild zu ziehen. Der Benutzer soll das Element verschieben und das Element ist innerhalb des Containers eingeschränkt. So weit, so gut:

Wenn ich jedoch manuell im Browser-Fenster auf der rechten unteren Ecke bewegt sich das Bild aus der Position ändern, Freilegung der Bild, um es überlagert.

Unten ist mein JQuery-Code, CSS-Code und HTML-Code. Wie kann ich das Kind DIV innerhalb der Grenzen seines übergeordneten Containers auf Größe ändern?

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

Sie die Funktion nutzen können:

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

Um die neue Position des Bildes neu zu berechnen.

Allerdings ist der beste Weg, um dieses Bild über CSS zu manipulieren. Sie können die "Background - Shorthand property" verwenden, um eine CSS zu definieren, ohne JavaScript-Manipulation.