jQuery手动可调整大小的DIV

问题描述：

我正在尝试创建一个可调整大小的div而不使用jQuery的接口库。

I'm trying to create a resizable div without using jQuery's interface library.

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

...

<div id="cooldiv" style="width: 500px; height: 300px; background-color: #cccccc; position: relative;">
<div id="resizeBar" style="height: 10px; width: 500px; background-color: #aaaaaa; position: absolute; bottom: 0;"></div>
</div>

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

The first resize works fine(i.e. mousedown, mousemove then mouseup), but on subsequent (mousedown+mousemove)s, the browser attempts to drag the whole resizeBar div instead of properly resizing its parent container. On mouseup, the div then starts resizing "cooldiv" on mousemove without any mousedown required, until a further click of the mouse.

这些问题不会出现在Internet上资源管理器。

These problems don't show up in Internet Explorer.

答

这是一个带有hr标记作为分隔符的示例（两个div之间）：

This is an example with a "hr" tag as separator (between 2 divs):

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

Javascript :(使用JQuery）：

Javascript: (using JQuery):

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

CSS（可选）：

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

jQuery手动可调整大小的DIV

相关推荐