JQuery可拖动-对于具有最小高度的div必须停止

我希望这个可拖动按钮不要与我可爱的realizable div r1重叠，这不仅仅是为了礼貌，我希望它在

r1

min height达到时停止

我想避免添加更多的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>

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