Javascript jQuery UI draggable-当内部元素大于父元素时约束父元素内的内部元素

我正试图通过jQuery UI实现这一效果——非常像你在Facebook上裁剪图像的方式：

下面是一个非常简单的HTML测试用例（一个

div中的
img
）：



这是一个似乎符合目的的逻辑——但它尚未完成：

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

$（“img”）.draggable（{drag:dragHandler}）；
函数dragHandler（事件，ui）{
var x=event.target.x-event.target.parentNode.offsetLeft；
var y=event.target.offsetTop；
如果（x>0）{
//如何在这里限制运动？
}
如果（x<-（event.target.offsetWidth-
event.target.parentNode.offsetWidth）{
}
如果（y>0）{
}
如果（y<-（event.target.offsetHeight-
event.target.parentNode.offsetHeight）{
}
$（“p”）。文本（x+”，“+y）；
}

我的第一次尝试是在所有多个访问点中修改
offsetLeft
&
offsetTop
变量，但似乎没有任何效果

下面是一个jsFiddle，上面解释了这一点：
实际上，您可以使用一个内部容器来执行此操作，该容器的宽度/高度计算为只允许图像移动一定距离。当然，您还必须适当地定位内部容器

以下是我的做法：

标记：

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

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