![](/img/trans.png)
[英]Resize parent element when inner one is dragged. (jqueryUI draggable)
[英]jQuery UI draggable - constrain inner element within parent when inner element is larger than parent
我试图用jQuery UI实现这种效果 - 非常像你在Facebook上裁剪图像的方式:
http://blog.creonfx.com/examples/javascript/facebook-cropping-mootools.html
这是一个非常简单的HTML测试用例( div
的img
):
<div>
<img src="fat_cat.jpg">
</div>
这是符合目的的逻辑 - 但它尚未完成:
$("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);
}
我的第一次尝试是在所有多个访问点中修改offsetLeft
和offsetTop
变量,但似乎没有什么对我有用。
以下是上面解释的jsFiddle: http : //jsfiddle.net/g105b/FdkBK/
实际上,您可以使用内部容器执行此操作,该容器的宽度/高度计算为仅允许图像移动一定距离。 当然,您还必须适当地放置内部容器。
这是我的意思:
标记:
<div id="outer"> <!-- position: relative -->
<div id="inner"> <!-- position: absolute -->
<img src="">
</div>
</div>
脚本:
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 });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.