jQuery UI 可拖动 - 当内部元素大于父元素时，将内部元素约束在父元素中答案

【问题标题】：jQuery UI draggable - constrain inner element within parent when inner element is larger than parentjQuery UI 可拖动 - 当内部元素大于父元素时，将内部元素约束在父元素中
【发布时间】：2011-07-24 18:31:01
【问题描述】：

我正在尝试使用 jQuery UI 来实现这种效果 - 非常类似于在 Facebook 上裁剪图像的方式：

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

这是一个非常简单的 HTML 测试用例（img 中的 div）：

<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/

【问题讨论】：

标签： javascript jquery jquery-ui draggable crop

【解决方案1】：

您实际上可以使用内部容器来执行此操作，其宽度/高度计算为仅允许图像移动一定距离。当然，您还必须适当地放置内容器。

这是我的尝试：

标记：

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

【讨论】：