我试图在不使用 jQuery 接口(interface)库的情况下创建一个可调整大小的 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 中。
最佳答案
尝试添加
$("#cooldiv").focus();
到你的 mouseup 函数的结尾。
关于javascript - jQuery 手动调整大小的 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/527468/