jQuery 如何通过拖动 DIV 的一侧来调整 DIV 的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6219031/
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
How can I resize a DIV by dragging just ONE side of it?
提问by Shamoon
Let me be more specific... I don't want the DIV to resize WHILE I'm dragging. I want to drag it out (and maybe a vertical line follows my cursor) and when I release, it resizes the div.
让我更具体地...我不希望 DIV 在我拖动时调整大小。我想把它拖出来（可能有一条垂直线跟随我的光标），当我释放时，它会调整 div 的大小。
采纳答案by Deepak Thomas
There is a much simpler way to achieve this. CSS 3 has a resizeproperty to make an html element resizeable, while following other CSS properties like min/max widths etc.
有一种更简单的方法来实现这一点。CSS 3 具有resize使 html 元素可调整大小的属性，同时遵循其他 CSS 属性，如最小/最大宽度等。
.resizeabe {
resize: both;
overflow: auto;
}
回答by Gabriele Petrioli
Have a look at this example
看看这个例子
Html
html
<div id="sidebar">
<span id="position"></span>
<div id="dragbar"></div>
sidebar
</div>
<div id="main">
main
</div>
jquery
查询
var dragging = false;
$('#dragbar').mousedown(function(e){
e.preventDefault();
dragging = true;
var main = $('#main');
var ghostbar = $('<div>',
{id:'ghostbar',
css: {
height: main.outerHeight(),
top: main.offset().top,
left: main.offset().left
}
}).appendTo('body');
$(document).mousemove(function(e){
ghostbar.css("left",e.pageX+2);
});
});
$(document).mouseup(function(e){
if (dragging)
{
$('#sidebar').css("width",e.pageX+2);
$('#main').css("left",e.pageX+2);
$('#ghostbar').remove();
$(document).unbind('mousemove');
dragging = false;
}
});
Demo at http://jsfiddle.net/gaby/Bek9L/1779/
演示在http://jsfiddle.net/gaby/Bek9L/1779/
it is an alteration from the code i posted in Emulating frame-resize behavior with divs using jQuery without using jQuery UI?
它是对我在Emulating frame-resize behavior with divs using jQuery without using jQuery UI 中发布的代码的更改？
回答by ckcc
Been looking to do this, very nice solution by Gaby. Although my requirement was not to have any absolute elements and use percentages instead of pixels, so I've changed Gaby's code a little to cater for this (if anyone is interested)
一直在寻找这样做，Gaby 非常好的解决方案。虽然我的要求是没有任何绝对元素并使用百分比而不是像素，所以我已经稍微改变了 Gaby 的代码来满足这一点（如果有人感兴趣的话）
CSS
CSS
#main{
background-color: BurlyWood;
float: right;
height:200px;
width: 75%;
}
#sidebar{
background-color: IndianRed;
width:25%;
float: left;
height:200px;
overflow-y: hidden;
}
#dragbar{
background-color:black;
height:100%;
float: right;
width: 3px;
cursor: col-resize;
}
#ghostbar{
width:3px;
background-color:#000;
opacity:0.5;
position:absolute;
cursor: col-resize;
z-index:999
}
JS
JS
var i = 0;
var dragging = false;
$('#dragbar').mousedown(function(e){
e.preventDefault();
dragging = true;
var main = $('#main');
var ghostbar = $('<div>',
{id:'ghostbar',
css: {
height: main.outerHeight(),
top: main.offset().top,
left: main.offset().left
}
}).appendTo('body');
$(document).mousemove(function(e){
ghostbar.css("left",e.pageX+2);
});
});
$(document).mouseup(function(e){
if (dragging)
{
var percentage = (e.pageX / window.innerWidth) * 100;
var mainPercentage = 100-percentage;
$('#console').text("side:" + percentage + " main:" + mainPercentage);
$('#sidebar').css("width",percentage + "%");
$('#main').css("width",mainPercentage + "%");
$('#ghostbar').remove();
$(document).unbind('mousemove');
dragging = false;
}
});
回答by A. Morel
Here's a slightly different way to do it without float but first with the content changing in real time dynamically ! (This is the best answer)
这是一种略有不同的方法，无需浮动，但首先是内容实时动态变化！（这是最佳答案）
var dragging = false;
$('#dragbar').mousedown(function(e){
e.preventDefault();
dragging = true;
var side = $('#side');
$(document).mousemove(function(ex){
side.css("width", ex.pageX +2);
});
});
$(document).mouseup(function(e){
if (dragging)
{
$(document).unbind('mousemove');
dragging = false;
}
});div{
color: #fff;
font-family: Tahoma, Verdana, Segoe, sans-serif;
}
#container{
background-color:#2E4272;
display:flex;
}
#side{
background-color:#4F628E;
width: 300px;
position: relative;
}
#main{
background-color:#7887AB;
z-index: 1;
flex-grow: 1;
}
#dragbar{
background-color:black;
height:100%;
position: absolute;
top: 0;
right: 0;
width: 5px;
cursor: col-resize;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="side">
Side<br /> Blabla<br /> Blabla<br /> Blabla<br />
<div id="dragbar"></div>
</div>
<div id="main">Dynamically sized content</div>
</div>回答by Code Maverick
回答by Andrei
I edited solution from the 1st comment but for vertical resizing of blocks
我从第一条评论中编辑了解决方案，但用于块的垂直调整
var i = 0;
var dragging = false;
$('#dragbar').mousedown(function(e){
e.preventDefault();
dragging = true;
var main = $('#main');
var wrapper = $('#wrapper');
var ghostbar = $('<div>',
{id:'ghostbar',
css: {
width: main.outerWidth(),
top: e.pageY,
left: main.offset().left
}
}).appendTo('#wrapper');
$(document).mousemove(function(e){
ghostbar.css("top", (e.pageY + 2));
});
});
$(document).mouseup(function(e){
if (dragging)
{
var percentage = ((e.pageY - $('#wrapper').offset().top) / $('#wrapper').height()) * 100;
var mainPercentage = 100-percentage;
$('#sidebar').css("height",percentage + "%");
$('#main').css("height",mainPercentage + "%");
$('#ghostbar').remove();
$(document).unbind('mousemove');
dragging = false;
}
});body,html{width:100%;height:100%;padding:0;margin:0;}
.clearfix:after {
content: '';
display: table;
clear: both;
}
#wrapper {
width: 600px;
margin: 50px auto 0 auto;
height: 300px;
background: yellow;
}
#main{
background-color: BurlyWood;
height:40%;
width: 100%;
min-height: 30px;
max-height: calc(100% - 30px);
}
#sidebar{
display: flex;
align-items: flex-end;
background-color: IndianRed;
width:100%;
height:60%;
overflow-y: hidden;
min-height: 30px;
max-height: calc(100% - 30px);
}
#dragbar{
background-color:black;
height:3px;
float: right;
width: 100%;
cursor: row-resize;
}
#ghostbar{
width: 100%;
height: 3px;
background-color:#000;
opacity:0.5;
position:absolute;
cursor: col-resize;
z-index:999}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div class="clearfix" id="wrapper">
<div id="sidebar">
<span id="position"></span>
<div id="dragbar"></div>
</div>
<div id="main"> </div>
</div>Demo: jsfiddle
演示：jsfiddle
回答by Deepak Thomas
I wrote (most of) this a while back http://jsfiddle.net/ydTCZ/12/. It is for a table, but it would not be hard to adapt it to a div. I show you this because it provides insight into the jQuery required to create a resize effect, thus allowing for complete customization to suit your needs.
我写了（大部分）这一段时间http://jsfiddle.net/ydTCZ/12/。它用于表格，但将其调整为 div 并不难。我向您展示这个是因为它提供了对创建调整大小效果所需的 jQuery 的深入了解，从而允许完全自定义以满足您的需求。
回答by sscirrus
You can find a resizable div here, which provides that feedback but only resizes once you release.
你可以在这里找到一个可调整大小的 div，它提供了反馈，但只有在你发布后才会调整大小。
