Javascript 如何允许只使用jQuery而不使用插件垂直调整DIV的大小？

编辑：我将这段代码放在jsbin中：

---

我试图让用户使用jQuery调整DIV元素的大小（仅垂直调整）。我读了关于jQueryUI的文章，尝试了它，几分钟后，它就开始工作了。但是库增加了约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>

它或多或少都能工作，但是如果你把工具栏拖得太快，它会随着鼠标的移动而停止，一切都会中断

---

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

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

听我说，听我说：跨浏览器的Javascript是一件非常可怕的事情。在许多版本中，有许多引擎使用许多不同的操作系统，所有这些引擎都有许多微妙之处，所有这些都使得Javascript非常难以使用。jQuery（及其扩展）这样的库之所以大受欢迎，有一个很好的原因：许多伟大的程序员花了很多时间将所有这些可怕的不一致之处抽象出来，所以我们不必担心

---

现在，我不确定你的用户群，也许你是在迎合那些仍然有拨号功能的老家庭主妇。但在当今时代的大多数情况下，最初页面加载时的25KB点击量（因为它将在之后被缓存）是为了让所有浏览器都能始终如一地工作，这是一个很小的代价。当涉及Javascript时，没有“简单”的大小调整，因此您最好使用UI。

我同意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);
        }
    });
});

---

在不调整大小时，只需在实际拖动时绑定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);
    });

});

---

（示例位于）

我做了一件类似的事情，并设法让它以最大和最小高度工作，在我看来，它工作起来非常流畅，这是我的代码

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

---

我如何使用它的活生生的例子，拉红色按钮，缺乏图像，所以我用简单的颜色代替

同意。如果您已经为引入jQuery付出了代价，那么引入核心和可调整大小并不会带来太多的负载。此外，如果您知道您的用户将可以访问Internet，您可以使用Google Ajax Libraries API引入jQuery UI，可在-上获得，并且如果您的用户已经访问了使用它的站点，它将被缓存，在这一点上实际上不会带来额外的下载。您是对的，这并没有那么多，我注意到很难获得交叉浏览器兼容性。无论如何，这不是我的网站，所以我没有意识到他们在没有缩小或压缩的情况下提供了大量Javascript。所以我压缩了所有内容，现在，即使使用jQueryUI，它也比以前小了！谢谢，我同意。但是也有一些较小的库与jQueryUI做同样的工作！不要学开车，更不要说修车了。就坐出租车吧。减1。如果你已经让它工作了，那就不用担心了。当人们开始抱怨，或者你每分钟有5000个用户访问该网站时，你会感到担心，因为这会让你付出一些代价。不要过早优化！谢谢事实上，该网站每天的页面浏览量约为100000次，并且提供了近100KB的未压缩Javascript。我加入了jQueryUI，当缩小和压缩时，它比以前小了：）它在Chrome3.0.190.4上运行得不太好。这表明我试图重新发明轮子，交叉浏览器兼容性是一个难题：请解释您的代码将如何应用于这个问题。代码中的注释行也会有所帮助。

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