如何通过拖动DIV的一侧来调整DIV的大小？

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的大小。

7 个解决方案

#1

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;
   }
});

Demo: http://jsfiddle.net/Bek9L/3020/

演示：http：//jsfiddle.net/Bek9L/3020/

#2

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

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?

它是我在使用jQuery而不使用jQuery UI时使用div的Emulating frame-resize行为中发布的代码的更改？

#3

Use jQuery UI with the ghost option:

使用带有ghost选项的jQuery UI：

See working jsFiddle demo:

查看工作jsFiddle演示：

$( "#resizable" ).resizable({ ghost: true });

#4

You can find a resizable div here, which provides that feedback but only resizes once you release.

你可以在这里找到一个可调整大小的div，它提供反馈，但只有在你发布后才会重新调整大小。

http://jqueryui.com/demos/resizable/#visual-feedback

http://jqueryui.com/demos/resizable/#visual-feedback

#5

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的洞察力，从而允许完全自定义以满足您的需求。

#6

I edited solution from the 1st comment but for vertical resizing of blocks

我从第1条评论中编辑了解决方案，但是对于块的垂直大小调整

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

#7

Here's a slightly different way to do it without float:

这里有一个稍微不同的方法，没有浮动：

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;
    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>