jquery – 如何通过拖动一方面来调整DIV？

让我更具体…我不想让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/

原文地址：https://www.jb51.cc/jquery/182008.html