设置调整大小边界答案

【问题标题】：Setting re-size boundaries设置调整大小边界
【发布时间】：2014-01-16 12:12:51
【问题描述】：

我有一个可水平调整大小的侧边栏，它本身由两个可垂直调整大小的部分组成（这是my-JSFiddle）

我通过添加 div 作为可拖动的大小调整处理程序来实现这一点，然后我可以对它的鼠标事件采取行动..

$(document).mousemove(function(e){
  $('#content').css("width",e.pageX+2);
  ('#history').css("left",e.pageX+2);
})

现在我希望应用以下约束：

侧边栏的最小宽度，这样我就不能完全折叠侧边栏
侧栏两个部分的最小和最大高度。

这些约束类似于 JSFiddle 本身的约束。我是否必须仅通过 JavaScript 执行此操作，还是有办法通过 CSS 实现此操作。

【问题讨论】：

Math.min, Math.max ... 完成。
@CBroe 我应该在哪里应用这些？
在那里确定新的宽度和左值...？

标签： javascript html css resize sidebar

【解决方案1】：

我为你添加了一个新的FIDDLE

在您的情况下，您必须检查当前宽度并从 css 中选择最小宽度或高度

喜欢这个

....
var cvmw = parseInt($('#content').css('min-width'));
....

然后检查它是否到达

$(document).mousemove(function (e) {
        // get current with
        var w = parseInt($('#content').css("width"));
        // check if with bigger than min-with
        if (w > cvmw) {
            $('#content').css("width", e.pageX + 2);
            $('#history').css("left", e.pageX + 2);
        } else {
            $('#content').css("width", cvmw + 1);
            $('#history').css("left", cvmw + 1);
            $(document).unbind('mousemove');
        }
    })

这里是更改后的 css，每个部分都有一些更改

#content {
    background-color: WhiteSmoke;
    width:75%;
    height: 80%;
    min-width: 100px; /* added this min-width for further actions */
    float: left;
    position: absolute;
    top:30px;
    bottom: 100px;
}

猜你可以做一些其他的动作来让鼠标在悬停像拖线这样的东西时保持拖动

【讨论】：