Trascinare un'immagine ingrandita all'interno di una maschera di ritaglio div utilizzando jQuery trascinabile?

Question

Sto creando un'interfaccia per consentire a un utente di ingrandire un'immagine e trascinare la versione ingrandita all'interno di una div di maschera di ritaglio.

Ho un div 200px by 200px che ho impostato overflow: nascosto. Quindi carico un file std (<img src="etc">) nel div che è, per esempio, 1000px by 1000px.

Poi ho utilizzare jQuery

$("#my-image").draggable({ containment: [-85,83,99,222] }); 

I numeri sono codificati. Finora posso trovarli solo per tentativi ed errori ...

Il problema è che ogni volta che apporto una modifica alla pagina (cioè inserisco un altro elemento sopra il mio contenitore div) la dimensione della pagina cambia e il mio codice fisso [ x1, y1, x2, y2] smettono di funzionare correttamente.

Il problema principale è che non capisco pienamente [x1, y1, x2, y2] ...

Ecco la documentazione jQuery per quanto riguarda questo:

http://docs.jquery.com/UI/Draggable#option-containment 

Ho ragione di pensare che x1 è il punto più a sinistra trascinabile, x2 è il punto più droppabile giusto? (e lo stesso per y1 & y2)?

Se sì, quale sarebbe la migliore strategia per calcolarli dinamicamente?

Inoltre, qualsiasi altra soluzione rapida e semplice al problema principale di "Trascinare un'immagine ingrandita all'interno di una maschera di ritaglio div" sarebbe molto apprezzata.

Answer 1

Ok. Ho questo lavoro ora. Ecco come impostare un'immagine trascinabile all'interno di una maschera di ritaglio div in modo che sia completamente dinamica e funzioni indipendentemente da come ridimensiona la pagina.

Il codice HTML/CSS

<div id="my-mask" style="width: 200px; height: 200px; overflow: hidden;"> 
    <img id="my-image" src="big-image.jpg" width="1000" height="1000"/> 
</div> 

Il jQuery/Javascript

// Make sure it always starts @ zero position for below calcs to work 
$("#my-image").css({top: 0, left: 0}); 

var maskWidth = $("#my-mask").width(); 
var maskHeight = $("#my-mask").height(); 
var imgPos  = $("#my-image").offset(); 
var imgWidth = $("#my-image").width(); 
var imgHeight = $("#my-image").height(); 

var x1 = (imgPos.left + maskWidth) - imgWidth; 
var y1 = (imgPos.top + maskHeight) - imgHeight; 
var x2 = imgPos.left; 
var y2 = imgPos.top; 

$("#my-image").draggable({ containment: [x1,y1,x2,y2] }); 
$("#my-image").css({cursor: 'move'}); 

Spero che questo aiuti qualcuno!

Answer 2

$(this).draggable({ 
    drag: function(event, ui) { 
     if (ui.position.top > 0) { 
      ui.position.top = 0; 
     } 
     var maxtop = ui.helper.parent().height() - ui.helper.height(); 
     if (ui.position.top < maxtop) { 
      ui.position.top = maxtop; 
     } 
     if (ui.position.left > 0) { 
      ui.position.left = 0; 
     } 
     var maxleft = ui.helper.parent().width() - ui.helper.width(); 
     if (ui.position.left < maxleft) { 
      ui.position.left = maxleft; 
     } 
    } 
});