javascript - 如何让仅使用 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。