jQuery手动可调整大小的DIV

Question

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

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）中，浏览器尝试拖动整个resizeBar div而不是正确地调整其父容器的大小。在mouseup上，div然后开始在mousemove上调整“cooldiv”，而无需任何必要的mousedown，直到再次点击鼠标。这些问题在Internet Explorer中不会显示。

- JC.

---

为什么在绑定和解除绑定时要使用空选择器？它们应该是$(this).bind/unbind吗？ - roborourke

你有没有考虑使用jQuery UI和resizable？ - Jay

同意，获取jQuery UI并使用resizable。如果您担心大小，可以只获取UI库的各个部分，而不需要全部内容。 - stusmith

我知道我可以使用jQuery UI，但我只想构建一个可调整大小的控件。即使是经过缩小的，jQuery UI的可调整大小功能也会增加26kb的文件大小。 - JC.

如果我没记错的话，空选择器会返回文档，即$(document)与$()是相同的。 - JC.

25kb似乎是一个合理的价格，以获取一个可工作的版本，并且将来会有支持和更新。 - acrosman

Answer 1

我偶尔会破坏调整大小的功能，此时会出现“不允许”的光标，框架不会动态调整大小，但是当我松开鼠标后，它会适当地调整大小并保持这种状态。

在resize函数的末尾添加return false;似乎可以阻止浏览器尝试选择/拖动调整大小的栏。由于我在有限的环境中工作，因此只能使用ie8（以及ie7模式下的ie8）进行测试。

我不得不用$(document)替换您对$()的调用才能使其正常工作。我还建议将mousemove绑定移出mousedown处理程序，并删除解除绑定的调用。

- lincolnk

Answer 2

尝试添加。

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

将此代码添加到您的mouseup函数的末尾。

- Emmett

Answer 3

这是一个带有“hr”标签作为分隔符的示例（在2个div之间）：

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

Javascript:（使用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;
}

- lepe