Question

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

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

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

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

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

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

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

猜测你可以做一些其他动作来保持鼠标绑定在拖动拉线时拉动

设置重新大小的边界

1 个答案: