How to simulate resistance within parent with the jQueryUI draggable?

Ive seen a simular thread but could'nt ask a followup question to it. I dont just want to simulate the rubberband effect but also make it possible to scroll all content even if the content is larger than its parent. I cant figure it out so i wanna ask for help here.

I set up a jsfiddle: http://jsfiddle.net/sAX4W/28/

enter code here

I want it to be possible to scroll down to the bottom of the text and have the rubberband effect as the text content ends. As you can see in my jsfiddle example, you cant scroll all down to past 30 as is the last text node.

Thanks for your time!

You can check the current top position and set css corresponding property of the draggable element on drag stop

stop: function(e, ui) {
    var diff = ui.helper.parent().height()-ui.helper.height();
    if (ui.position.top<=diff)
       ui.helper.css('top', diff+"px");
    else if (ui.position.top>=0)    
       ui.helper.css('top', "0px");

}

Besides that I think you should either use revert:true or your on drag function, not both

have a look at updated jsfiddle