如何通过将div拖动到顶部来调整其大小? [英] How can I resize a div by dragging it at the top?

问题描述

我想在拖动两个div之间的部分时调整div的大小.

I want to resize a div while dragging the portion between two div's.

在搜索中，我发现了此，但我不知道如何使它成为水平而不是水平有垂直拖曳力吗?

On search I found this but I don't know how make this horizontal instead of available vertical drag?

我的div看起来像

<div id="widnow">
<div id="button">-</div>
    <div id="title_bar"><b>Console Log</b></div>
    <div id="box">${logs}</div>
</div>

我希望标题栏可以垂直拖动.

I want the title bar to be draggable vertically.

我不想使用任何第三方插件.

I don't want to use any third party plugin's.

推荐答案

我更改了您的代码:
另外，这是 小提琴演示
HTML:

I have changed your code:
Also, here is a Fiddle DEMO
HTML:

<div id="sidebar">
  <span id="position"></span>
  sidebar
</div>
<div id="dragbar"></div>
<div id="main">main</div>

CSS:

body,html{width:100%;height:100%;padding:0;margin:0;}
#main{
  background-color: BurlyWood;
  float: left;
  height:100px;
  right: 0;
  width: 100%;    
}
#sidebar{
  background-color: IndianRed;  
  width:100%;
  float: left;
  height:100px;
  overflow-y: hidden;
}

#dragbar{
  background-color:black;
  height:5px;
  float: left;
  width: 100%;
  cursor: row-resize;
}
#ghostbar{
  width:3px;
  background-color:#000;
  opacity:0.5;
  position:absolute;
  cursor: col-resize;
  z-index:999
}

JavaScript代码:

JavaScript Code:

var i = 0;
var dragging = false;
$('#dragbar').mousedown(function(e){
  e.preventDefault();

  dragging = true;
  var main = $('#main');
  var dragbar = $("#dragbar");
  var ghostbar = $('<div>',
    {id:'ghostbar',
        css: {
          height: dragbar.outerHeight(),
          width: dragbar.outerWidth(),
          top: main.offset().top,
          bottom: main.offset().bottom
        }
   }).appendTo('body');

   $(document).mousemove(function(e){
     ghostbar.css("top",e.pageY+2);
   });
});

$(document).mouseup(function(e){
  if (dragging){
    $('#sidebar').css("height",e.pageY+2);
    $('#main').css("top",e.pageY+2);
    $('#ghostbar').remove();
    $(document).unbind('mousemove');
    dragging = false;
  }
});

这篇关于如何通过将div拖动到顶部来调整其大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！