jQuery手动可调整大小的DIV [英] jQuery Manual Resizable 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！