如何仅使用 jQuery 垂直调整 DIV 大小 - 无需插件？

Question

编辑：我将这段代码放入jsbin中：http://jsbin.com/eneru

---

我试图让用户使用 jQuery 调整 DIV 元素的大小（仅垂直）。 我读到了有关 jQuery UI 的内容，我尝试了它，几分钟后，我就让它工作了。 但该库增加了约 25KB 的开销，我希望避免这种情况，因为我只想要简单的垂直调整大小。

所以我尝试自己做。 这是 HTML，为了清晰起见，我使用内联样式：

<div id="frame" style="border: 1px solid green; height: 350px">
    <div style="height: 100%">Lorem ipsum blah blah</div>
    <span id="frame-grip" style="display: block; width: 100%; height: 16px; background: gray"></span>
</div>

如您所见，DIV 元素下方有一个小栏，因此用户可以向上或向下拖动它来调整 DIV 的大小。 这是 Javascript 代码（使用 jQuery）：

$(document).ready(function(){
    var resizing = false;
    var frame = $("#frame");
    var origHeightFrame = frame.height();
    var origPosYGrip = $("#frame-grip").offset().top;
    var gripHeight = $("#frame-grip").height();


    $("#frame-grip").mouseup(function(e) {
        resizing = false;
    });

    $("#frame-grip").mousedown(function(e) {
        resizing = true;
    });

    $("#frame-grip").mousemove(function(e) {
        if(resizing) {
            frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
        }
    });
});

它或多或少可以工作，但如果你拖动栏太快，它就会停止跟随鼠标移动，一切都会中断。

这是我第一次尝试用 JS 和 jQuery 做一些严肃（咳咳）的事情，所以我可能会做一些愚蠢的事情。 如果是这样，请告诉我:)

Answer 1

你正在做一些愚蠢的事情：你试图自己做这件事。

听我说，听我说：跨浏览器的 JavaScript 是一件非常非常可怕的事情。 有许多版本的许多引擎和许多不同的操作系统，所有这些都有很多微妙之处，所有这些都使得 Javascript 很难使用。 jQuery（及其扩展）等库的流行有一个很好的理由：许多优秀的程序员花费了大量时间来抽象出所有这些可怕的不一致之处，因此我们不必担心它。

现在，我不确定您的用户群，也许您正在迎合仍然使用拨号的老家庭主妇。 但在当今时代，大多数情况下，初始页面加载时的 25KB 命中（因为它将在之后被缓存），因为这将在所有浏览器中一致地工作，这是一个很小的代价。 对于 Javascript 来说，不存在“简单”调整大小这样的事情，因此最好使用 UI。

Answer 2

我做了类似的事情，并设法让它以最大和最小高度工作，对我来说似乎工作非常流畅，这是我的代码。

    $(document).ready(function()
{
    var resizing = false;
    var frame = $("#frame").height();

    $(document).mouseup(function(event)
    {
        resizing = false;
        frame = $("#frame").height();
    });

    $("#frame-grip").mousedown(function(event)
    {
        resizing = event.pageY;
    });

    $(document).mousemove(function(event)
    {
        if (resizing)
        {
            $("#frame").height(frame + resizing - event.pageY);
        }
    });
});

我如何使用它的活生生例子，拉动红色按钮，缺少图像，所以我用简单的颜色替换。 http://jsbin.com/ufuqo/23

Answer 3

我同意 Paolo 关于使用 UI 的观点，但为了使其正常工作，需要对代码进行一些修改：

$(document).ready(function(){
    var resizing = false;
    var frame = $("#frame");

    $(document).mouseup(function(e) {
        resizing = false;
    });

    $("#frame-grip").mousedown(function(e) {
        e.preventDefault();
        resizing = true;
    });

    $(document).mousemove(function(e) {
        if(resizing) {
          var origHeightFrame = frame.height();
          var origPosYGrip = $("#frame-grip").offset().top;
          var gripHeight = $("#frame-grip").height();
          frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
        }
    });
});

Answer 4

当您不调整大小时，您可以通过仅在实际拖动时绑定 mousemove 函数来节省调用不执行任何操作的处理程序：（

$(document).ready(function(){
    var resizing = function(e) {
        var frame = $("#frame");
        var origHeightFrame = frame.height();
        var origPosYGrip = $("#frame-grip").offset().top;
        var gripHeight = $("#frame-grip").height();
        frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
        return false;
    }

    var stopResizing = function(e) {
        $(document).unbind("mouseover", resizing);
    }

    $("#frame-grip").mouseup(stopResizing);

    $("#frame-grip").mousedown(function(e) {
        e.preventDefault();
        $(document).bind("mouseover", resizing).mouseup(stopResizing);
    });

});

示例位于 http://jsbin.com/ufuqo)