javascript 使用 jQuery 在不使用 jQuery UI 的情况下使用 div 模拟调整帧大小的行为？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4673348/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Emulating frame-resize behavior with divs using jQuery without using jQuery UI?
提问by user210099
I'm converting a site for a client from a frameset to divs. One feature that the client has is a sidebar that can be resized depending on how much space the user needs. Using frames the resizing of this sidebar was built in. However, I'm having some difficulty emulating this capability in jQuery.
我正在将客户端的站点从框架集转换为 div。客户端具有的一项功能是侧边栏，可以根据用户需要的空间大小调整其大小。使用框架调整此侧边栏的大小是内置的。但是，我在 jQuery 中模拟此功能时遇到了一些困难。
I don't wish to use jQuery UI to do this, I have no need for all the extra functionality that the UI suite provides, and would rather just write a few lines of code to take care of this.
我不希望使用 jQuery UI 来执行此操作，我不需要 UI 套件提供的所有额外功能，而只想编写几行代码来处理此问题。
I only need to resize in the horizontal plane, vertical dimensions are fixed.
我只需要在水平面上调整大小，垂直尺寸是固定的。
Currently I have a solution that (sort of) works. The sidebar div can be resized, but only if a user clicks on the resizable div, drags the mouse, then clicks on the div again (to remove the mousemove event).
目前我有一个（有点）有效的解决方案。侧边栏 div 可以调整大小，但前提是用户单击可调整大小的 div，拖动鼠标，然后再次单击 div（以删除 mousemove 事件）。
The experience I want is this: A user hovers over the resizable div, presses the mouse button down, then drags the div to be larger/smaller, and releases the button.
我想要的体验是这样的：用户将鼠标悬停在可调整大小的 div 上，按下鼠标按钮，然后将 div 拖动到更大/更小，然后释放按钮。
The problem I'm having is this: If a user clicks on my resizable div, then tries to drag it to make it smaller/larger, the mouse becomes the "no" icon, and there is a transparent version of my div that is drug around with the mouse.
我遇到的问题是：如果用户单击我的可调整大小的 div，然后尝试拖动它以使其变小/变大，则鼠标变为“否”图标，并且我的 div 有一个透明版本用鼠标周围的药物。
Perhaps this is better explained by checking out my code:.
也许通过查看我的代码可以更好地解释这一点：。
$(document).ready(function() {
var i = 0;
$('#dragbar').mousedown(function(){
$('#mousestatus').html("mousedown" + i++);
$(document).mousemove(function(e){
$('#position').html(e.pageX +', '+ e.pageY);
$('#sidebar').css("width",e.pageX+2);
})
console.log("leaving mouseDown");
});
$(document).mouseup(function(){
$('#clickevent').html('in another mouseUp event' + i++);
$(document).unbind('mousemove');
});
});
and HTML:
和 HTML：
<div id="header">
header
<span id="mousestatus"></span>
<span id="clickevent"></span>
</div>
<div id="sidebar">
<span id="position"></span>
<div id="dragbar">
</div>
sidebar
</div>
<div id="main">
main
</div>
<div id="footer">
footer
</div>
Here is a temp webpage with the basic layout working:
这是一个基本布局工作的临时网页：
http://pastehtml.com/view/1crj2lj.html
http://pastehtml.com/view/1crj2lj.html
The problem can be seen if you try to resize the thing labeled "sidebar" using the brown bar.
如果您尝试使用棕色条调整标有“侧边栏”的内容的大小，则可以看到问题。
回答by Gabriele Petrioli
Look at http://www.jsfiddle.net/gaby/Bek9L/
看看http://www.jsfiddle.net/gaby/Bek9L/
I changed the #mainarea to be left:200px(and no width).
Added e.preventDefault()on the mousedown to avoid the selection of text to occur.
In the code i alter the leftproperty of the #mainas well so both sides move..
我将#main区域更改为left:200px(并且没有宽度)。在 mousedown 上
添加e.preventDefault()以避免选择文本。
在代码中，我改变了 的left属性，#main所以双方都移动了..
Not sure what you problem really is, but what is see is that the #sidebarwas resized but was going underneath the #mainand so the #dragbardisappeared..
不确定你真正的问题是什么，但可以看到的是，#sidebar调整了大小，但在下面#main，所以#dragbar消失了..
回答by gblazex
Use event.preventDefault.
$('#dragbar').mousedown(function(e){
e.preventDefault();
// ...
});
Maybe you need to call it in mousemovetoo.
也许你也需要调用它mousemove。
