jQuery UI que pueden arrastrarse - limitar elemento interno dentro de los padres cuando el elemento interior es más grande que los padres

Question

que estoy tratando de conseguir este efecto con jQuery UI - muy parecido a la forma en que se recorta una imagen en Facebook:

http://blog.creonfx.com/examples/javascript/facebook-cropping-mootools.html

aquí es un caso muy simple prueba en HTML (una img dentro de un div):

<div> 
    <img src="fat_cat.jpg"> 
</div> 

y aquí es la lógica que parece idóneo para tal fin - sin embargo, es sin terminar:

$("img").draggable({ drag: dragHandler }); 

function dragHandler(event, ui) { 
    var x = event.target.x - event.target.parentNode.offsetLeft; 
    var y = event.target.offsetTop; 

    if(x > 0) { 
     // How to constrain the movement here? 
    } 
    if(x < -(event.target.offsetWidth - 
      event.target.parentNode.offsetWidth)) { 
    } 
    if(y > 0) { 
    } 
    if(y < -(event.target.offsetHeight - 
      event.target.parentNode.offsetHeight)) { 
    } 

    $("p").text(x + ", " + y); 
} 

Mis primeros intentos fueron de modificar las variables de offsetLeft & offsetTop, en todas sus múltiples puntos de acceso, pero nada parece estar funcionando para mí.

Aquí es una jsFiddle con lo que se ha explicado anteriormente: http://jsfiddle.net/g105b/FdkBK/

Answer 1

En realidad se puede hacer esto con un recipiente interior cuya anchura/altura se calcula para permitir sólo la imagen que recorrer una cierta distancia. Por supuesto, también debe colocar el contenedor interno de forma adecuada.

Aquí es mi ir en él:

de marcado:

<div id="outer"> <!-- position: relative --> 
    <div id="inner"> <!-- position: absolute --> 
     <img src=""> 
    </div> 
</div> 

Guión:

var img = $("img").draggable({ containment: '#inner'}), 
    h = img.height(), 
    w = img.width(), 
    outer = $('#outer'), 
    oH = outer.height(), 
    oW = outer.width(), 
    iH = h + (h - oH), 
    iW = w + (w - oW), 
    iT = '-' + ((iH - oH)/2) + 'px', 
    iL = '-' + ((iW - oW)/2) + 'px'; 

$('#inner').css({ width: iW, height: iH, top: iT, left: iL });