Javascript jQuery手动可调整大小的DIV

我试图在不使用jQuery接口库的情况下创建一个可调整大小的div

var myY = 0;
var mouseDown = false;
var originalHeight = 0; 

function resize(e){
    if(mouseDown == true){
        $("#cooldiv").height(originalHeight+e.pageY-myY);
    }
} 

$(document).ready(function(){
    $().mouseup(function(e){
        myY = 0;
        mouseDown = false;
        originalHeight = 0;
        $().unbind("mousemove", resize);
    });

    $("#resizeBar").mousedown(function(e){
        myY = e.pageY;
        originalHeight = $("#cooldiv").height();
        mouseDown = true;
        $().bind("mousemove", resize);
    });
});

第一次调整大小可以正常工作（即mousedown、mousemove然后mouseup），但在随后的（mousedown+mousemove）上，浏览器尝试拖动整个resizeBar div，而不是正确调整其父容器的大小。在mouseup上，div开始在mousemove上调整“cooldiv”的大小，而不需要任何mousedown，直到再次单击鼠标

这些问题不会出现在Internet Explorer中。

请尝试添加

$("#cooldiv").focus();

---

我偶尔能够中断调整大小功能，在这里我会得到“不允许”光标，框不会动态调整大小，尽管当我放开鼠标时，它会适当调整大小并保持不变

添加

返回false到
调整大小
功能的末尾，似乎会阻止浏览器尝试选择/拖动调整大小栏。我在一个有限的环境中工作，所以我只能用ie8（和ie7模式下的ie8）进行测试

我不得不用
$（文档）
替换您对
$（）
的呼叫，以使其正常工作。我还建议将
mousemove
绑定移出
mousedown
处理程序，并删除解除绑定调用。
这是一个以“hr”标记作为分隔符的示例（在两个div之间）：

CSS（可选）：

为什么绑定和取消绑定都有空白选择器？它们应该是$（this.bind/unbind）吗？您想过使用jQuery UI和resizeable吗？同意，抓取jQuery UI并使用resizeable。如果您担心大小，您可以只获取UI库的各个部分，而不需要全部。我知道我可以使用jQuery UI，但我只想构建一个可调整大小的控件。即使缩小了，jQueryUI的可调整大小本身也会增加26kb.25kb，这对于一个工作版本来说似乎是一个合理的价格，该版本将在未来的版本中得到支持和更新。
$("#cooldiv").focus();

<div>Text here</div>
<hr />
<div>Other text</div>

var hr = null;
$("hr").mousedown(function(e) {
    hr = {
        y : e.pageY,
        p : $(this).prev(),
        n : $(this).next(),
        ph: $(this).prev().height(),
        nh: $(this).next().height()
    };
    e.preventDefault();
});
$(document).mousemove(function(e) {
    if(hr) {
        hr.p.height(hr.ph+(e.pageY - hr.y));
        hr.n.height(hr.nh-(e.pageY - hr.y));
    }
    e.preventDefault();
}).mouseup(function(e) {
    hr = null;
    e.preventDefault();
});

hr {
    background-color: #DDD;
    border: 1px solid #AAA;
    cursor: n-resize;
    height: 10px;
}