javascript - 调整 child 的大小，但 child 的高度最低 1

Question

我正在尝试使用 jQuery draggable 创建可调整大小的 div 效果很好，但存在一个问题，因为它无法识别停止的位置..

这是我目前所做的，

 $(document).ready(function () {
$('.resizeDiv').draggable({
    axis: 'y',
    containment: '#container1',
    helper: 'clone',
    drag: function (event, ui) {
        var $child1 = $("#child1");
        if ($child1.outerHeight() > 50) {
            var height = ui.offset.top - 10;
            $child1.height(height);
            var totalHeight = $("#container1").height();
            var preHeight = totalHeight - height;
            $("#child2").height(preHeight);
        }
    },
});
});

#container1 {
width: 300px;
height: 240px;
border: 1px solid black;
}
#child1 {
height:100px;
min-height:50px; 
width:100%;
background-color:red;
}
#child2 {
height:100px;
width:100%;
background-color:green;
}
.resizeDiv {
border: 1px dashed #CCC;
background-color: #FFFFEE;
width: 100%;
height: 40px;
cursor: move;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<div id="container1">
    <div id="child1"></div>
    <div class="resizeDiv"></div>
    <div id="child2"></div>
</div>

JSFiddle - http://jsfiddle.net/U2nKh/749/

我想在 child1 达到它的最小高度时停止拖动

Answer 1

在drag函数中的else条件下，调用preventDefault，一旦条件失败，就停止继续拖动

更新的 JS fiddle :http://jsfiddle.net/U2nKh/751/

但是注意到一个错误，一旦达到 child1 的最小高度，就不能向相反方向拖动，看起来需要更新条件

编辑:如果条件已更新，现在您可以拖动到任一侧并在 child1 或 child2 达到最小高度时停止拖动 JS fiddle :http://jsfiddle.net/U2nKh/752/