jQuery UI draggable - ограничить внутренний элемент в родительском элементе, когда внутренний элемент больше, чем родительский

Я пытаюсь добиться этого эффекта с помощью jQuery UI - очень похоже способ обрезки изображения в Facebook:

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

Вот очень простой тестовый пример в HTML ( img в 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/