让我更具体一点......我不希望DIV在我拖动时调整大小。我想将它拖出来（也许我的光标后面有一条垂直线）当我发布时，它会调整div的大小。
一直在寻找这个，Gaby非常好的解决方案。虽然我的要求是没有任何绝对元素并且使用百分比而不是像素，所以我已经改变了Gaby的代码以适应这一点（如果有人感兴趣的话）
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
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;
}
});
但是：ぁzxswい
看看这个例子
HTML
http://jsfiddle.net/Bek9L/3020/
jQuery的
<div id="sidebar">
<span id="position"></span>
<div id="dragbar"></div>
sidebar
</div>
<div id="main">
main
</div>
在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;
}
});
演示
它是我在http://jsfiddle.net/gaby/Bek9L/1779/发布的代码的更改
这里有一个稍微不同的方法，没有浮动：
$( "#resizable" ).resizable({ ghost: true });
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>。这是一张桌子，但要让它适应一个div并不难。我向您展示了这一点，因为它提供了创建调整大小效果所需的jQuery的洞察力，从而允许完全自定义以满足您的需求。
我从第一条评论编辑了解决方案，但是用于垂直调整块的大小
http://jsfiddle.net/ydTCZ/12/
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}但是：ぁzxswい
你可以在这里找到一个可调整大小的div，它提供反馈，但只有在你发布后才会重新调整大小。
<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>