jQuery UI sürüklenebilir - Çok yol gibi Facebook'ta bir görüntü kırpma - iç eleman ebeveyn

Question

jQuery UI ile bu etkiyi elde etmek için çalışıyorum daha büyük olduğunda üst içinde iç elemanı sınırlamak:

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

burada HTML çok basit bir test durumu (a div içinde img) 'dir:

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

ve burada amaca uygun görünüyor mantık - bitmemiş olduğunu ancak:

$("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); 
} 

Benim ilk girişimleri tüm çoklu erişim noktalarında, offsetLeft & offsetTop değişkenlerini değiştirmek için, ama hiçbir şey benim için çalışıyor gibi görünüyor. Aslında kimin genişlik/yükseklik sadece belli bir mesafe kat etmek görüntüyü sağlamak için hesaplanan iç kabın ile yapabilirsiniz http://jsfiddle.net/g105b/FdkBK/

Answer 1

:

İşte yukarıda anlatılanlar ile jsFiddle olduğunu. Elbette iç kabı uygun şekilde konumlandırmanız gerekir. İşte

ona zaman git:

Biçimlendirme:

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

Senaryo:

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