JQuery可拖动 - 必须为最小高度的div停止

Question

我希望这个可拖动的按钮不会与我可爱的可实现的div r1重叠，这不仅仅是关于礼仪，我希望它在r1最小高度达到时停止。

我想避免添加更多div，因为这会让我调整它们的大小。 （它尚未完成......）

<div id="demo">
    <div id="r1">I am resizeable but with min height</div>
    <div id="draggable" class="ui-widget-content">
        <p>Drag me</p>
    </div>
    <div id="r2">I am resizeable but with min height</div>
</div>

JS

var $container = $("#demo");

function resizeContainer(e, ui) {
    //resizing 
    var drag = ui.offset.top;

    $("#r1").height(drag);
    $("#r2").height(drag);
}

$("#draggable").draggable({
    axis: "y",
    drag: resizeContainer,
    containment: "#demo"
});

小提琴

http://jsfiddle.net/XLrNF/319/