让我更具体…我不想让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;
}
});
演示：http://jsfiddle.net/Bek9L/3020/