Question

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

这是我到目前为止所做的，

＆＃13;

 $(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);
        }
    },
});
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

我想在child1达到最低身高时拖动停止

Answer 1

在drag函数内的else条件中，调用preventDefault以便一旦条件失败，就应该停止进一步拖动

更新了JS小提琴：http://jsfiddle.net/U2nKh/751/

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

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

调整孩子的大小但是孩子的身高最小

1 个答案: