jQuery 手动调整大小的 DIV答案

【问题标题】：jQuery Manual Resizable DIVjQuery 手动调整大小的 DIV
【发布时间】：2010-10-06 08:41:35
【问题描述】：

我正在尝试在不使用 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);
    });
});

...

<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 中。

【问题讨论】：

为什么绑定和取消绑定有空白选择器？它们应该是 $(this).bind/unbind 吗？
你有没有想过使用 jQuery UI 和调整大小？
同意，使用 jQuery UI 并使用可调整大小。如果您担心大小，您可以只获取 UI 库的各个部分，不需要全部。
我知道我可以使用 jQuery UI，但我只想构建一个可调整大小的控件。即使缩小，仅 jQuery UI 的可调整大小就增加了 26kb。
25kb 似乎是支付未来版本支持和更新的工作版本的合理价格。

标签： javascript jquery resize

【解决方案1】：

尝试添加

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

到你的 mouseup 函数结束。

【讨论】：

【解决方案2】：

我偶尔会破坏调整大小的功能，在那里我会得到“不允许”光标并且框不会动态调整大小，尽管当我放开鼠标时它会适当地调整大小并保持这种状态。

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

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

【讨论】：

【解决方案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;
}

【讨论】：