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:jQuery UI sürüklenebilir - Çok yol gibi Facebook'ta bir görüntü kırpma - iç eleman ebeveyn
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/
Güzel ve temiz bir şekilde yapılır, – Greg
@Greg teşekkür ederim - sen Hoşgeldiniz! :) –