我怎样才能通过拖动它的一面来调整DIV的大小？ [英] How can I resize a DIV by dragging just ONE side of it?

问题描述

让我更具体一些......我不想让DIV在我拖动时调整大小。我想把它拖出来（也许一个垂直线跟随我的光标），当我释放时，它调整div的大小。

>一直在寻找这样做，Gaby非常好的解决方案。虽然我的要求是没有任何绝对元素，并使用百分比而不是像素，所以我已经改变了Gaby的代码以适应这个（如果任何人有兴趣）

CSS

  #main {
 background-color：BurlyWood; 
 float：right; 
 height：200px; 
宽度：75％; 
} 
 #sidebar {
 background-color：IndianRed; 
宽度：25％; 
 float：left; 
 height：200px; 
 overflow-y：hidden; 
} 
 #dragbar {
 background-color：black; 
身高：100％; 
 float：right; 
 width：3px; 
 cursor：col-resize; 
} 
 #ghostbar {
 width：3px; 
背景颜色：＃000; 
不透明度：0.5; 
位置：绝对; 
 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：{$ b $ height：main.outerHeight ），
 top：main.offset（）。top，
 left：main.offset（）。left 
} 
}）。appendTo（'body'）; 
 $ b $（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-percent; 
 
 $（'＃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/

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.

解决方案

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)

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

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

这篇关于我怎样才能通过拖动它的一面来调整DIV的大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！