Przeciągnij powiększony obraz w obrębie maski przycinającej div przy użyciu przeciągnięcia jQuery?

Question

Tworzę interfejs umożliwiający użytkownikowi powiększenie obrazu i przeciągnięcie powiększonej wersji w obrębie div maski przycinającej.

Mam div 200px by 200px, które ustawiłem overflow: hidden on. Następnie ładuję std img (<img src="etc">) do elementu div, na przykład 1000px by 1000px.

Następnie używam jQuery

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

Liczby są twarde kodowane. Do tej pory mogę je znaleźć tylko metodą prób i błędów ...

Problem polega na tym, że za każdym razem, gdy dokonuję zmiany na stronie (tzn. Wstawiam kolejny element nad moim div kontenera) rozmiar strony zmienia się i mój kod jest zakodowany [ x1, y1, x2, y2] przestają działać poprawnie.

Głównym problemem jest to, że nie w pełni zrozumieć [x1, y1, x2, y2] ...

Oto docs jQuery dotyczące tego:

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

mam rację w myśleniu że x1 jest najbardziej zwrotnym lewym punktem, x2 jest prawym najbardziej zwrotnym punktem? (i to samo dla y1 & y2)?

Jeśli tak, jaka byłaby najlepsza strategia, aby obliczyć je dynamicznie?

Również inne szybkie i łatwe rozwiązania głównego problemu "Przeciągnij powiększony obraz w obrębie maski przycinającej div" będą mile widziane.

Answer 1

Ok. Mam to teraz działa. W ten sposób można ustawić przeciągany obraz wewnątrz maski przycinającej div, dzięki czemu będzie on całkowicie dynamiczny i działa niezależnie od zmiany rozmiaru strony.

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> 

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

Nadzieja to pomaga kogoś!

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