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

【问题标题】：How can I resize a DIV by dragging just ONE side of it?如何通过仅拖动一侧来调整 DIV 的大小？
【发布时间】：2021-07-02 06:29:07
【问题描述】：

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

【问题讨论】：

标签： jquery html

【解决方案1】：

看看这个例子

HTML

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

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

http://jsfiddle.net/gaby/Bek9L/1779/的演示

这是对我在Emulating frame-resize behavior with divs using jQuery without using jQuery UI? 中发布的代码的修改

【讨论】：

+1 - 非常好的解决方案。我只是稍微修改了一下，因为我需要一个元素的水平调整大小条来测试不同高度的全屏背景图像。很难删除未使用的元素 $('#mousestatus').html("mousedown" + i++); 和 $('#clickevent').html('in another mouseUp event' + i++);
@yves.. 是的好点.. 这是原始答案的遗留问题（到另一个问题）。 更新链接

【解决方案2】：

一直在寻找这样做，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/

【讨论】：

【解决方案3】：

有一种更简单的方法可以实现这一点。 CSS 3 有一个 resize 属性来使 HTML 元素可调整大小，同时遵循其他 CSS 属性，如最小/最大宽度等。

.resizeable {
  resize: both;
  overflow: auto;
  border: 2px solid black;
}

欲了解更多信息，这里是MDN Docs on the resize CSS 3 property。

【讨论】：

这很有用，但如果你可以让整个侧面都可拖动会更有帮助。因此，对于屏幕左侧的导航菜单，我可能想拖动它的右边框来调整菜单空间的大小。此解决方案将调整大小控件放在右下角，但我担心我的用户不会在屏幕底部看到它。（我的 div 扩展了窗口的整个高度。）

【解决方案4】：

Pure JS
Live Update
CSS Variable

let dragging = 0,
  body = document.body,
  target = document.getElementById('dragbar');

function clearJSEvents() {
  dragging = 0;
  body.removeEventListener("mousemove", resize);
  body.classList.remove('resizing');
}

function resize(e) {
  if (e.pageX > 400 || e.pageX < 200) {
    return;
  }
  body.style.setProperty("--left-width", e.pageX + 'px');
}

target.onmousedown = function(e) {
  e.preventDefault();
  dragging = 1;
  body.addEventListener('mousemove', resize);
  body.classList.add('resizing');
};

document.onmouseup = function() {
  dragging ? clearJSEvents() : '';
};

body {
  --left-width: 300px;
  padding: 0;
  margin: 0;
}

body.resizing {
  cursor: col-resize;
}

#main,
#sidebar,
#dragbar {
  top: 0;
  height: 100%;
  background: white;
  position: absolute;
}

#sidebar {
  background: #e6e9f0;
  width: var(--left-width);
}

#main {
  right: 0;
  overflow: scroll;
  width: calc(100% - var(--left-width));
}

#main section {
  margin: 20px auto;
  border-radius: 10px;
  background: white;
  height: 100px;
  width: calc(100% - 60px);
  transition: 0.3s ease-in-out 0s;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}

#main section:hover {
  box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px #A8D1FD;
}

#dragbar {
  right: 0;
  width: 5px;
  opacity: 0;
  cursor: col-resize;
  background: #0099e5;
  transition: 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s;
}

#dragbar:hover,
body.resizing #dragbar {
  opacity: 1;
  transition: 0.3s ease-in-out 0s, opacity 0.3s ease-in-out .3s;
}

<body>
  <section id="sidebar">
    <div id="dragbar"></div>
  </section>
  <main id="main">
    <section></section>
    <section></section>
    <section></section>
  </main>
</body>

【讨论】：

如何使这个垂直？

【解决方案5】：

这里有一个稍微不同的方法，不用浮动，但首先是内容实时动态变化！（这是最佳答案）

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;
    z-index: 1;
    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>

【讨论】：

我在工作中支持的浏览器是 FF38，因此使用 CSS 网格启用它是不可能的。就我而言，这是一个非常简单的解决方案。

【解决方案6】：

使用带有ghost 选项的jQuery UI：

See working jsFiddle demo:

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

【讨论】：

我不想幻像，因为我的 DIV 中有很多元素
jsfiddle.net/BMwTy/3 有很多按钮，我认为重影选项没有问题。我们在这里谈论多少元素？

【解决方案7】：

我从第 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>

演示：jsfiddle

【讨论】：

【解决方案8】：

您可以在此处找到可调整大小的 div，它提供反馈，但仅在您发布后才调整大小。

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

【讨论】：

这是整个 DIV 的重影。我的有很多元素，所以我不能把整个东西都弄成鬼。
@Shamoon - 你能发布一个你正在谈论的那种情况的例子吗？从用户体验的角度来看，重影 div 可能是对用户更友好的解决方案，特别是如果您正在谈论调整如此庞大的元素集合的大小（否则用户在释放鼠标按钮之前没有任何关于结果的真实反馈就调整大小）。无论如何，我将把它留作深思。

【解决方案9】：

我不久前写了（大部分）这篇文章http://jsfiddle.net/ydTCZ/12/。它适用于表格，但将其调整为 div 并不难。我向您展示这一点是因为它提供了对创建调整大小效果所需的 jQuery 的深入了解，从而允许完全自定义以满足您的需求。

【讨论】：