Jquery UI draggable不会调整其他DIV的大小

In this plunk I have three DIVs divided by two other DIVs that are draggable (gray color). When the draggable DIVs are dragged up/down or left/right, the other DIVs should be resized.

在这个插入物中，我有三个DIV被另外两个可拖动的DIV（灰色）分开。当向上/向下或向左/向右拖动可拖动的DIV时，应调整其他DIV的大小。

The first draggable DIV works fine (the one on the left that resizes the other DIVs vertically). But the second draggable DIV doesn't work, even though the method is the same as the first draggable DIV. Any ideas how to fix this?

第一个可拖动的DIV工作正常（左侧的那个可以垂直调整其他DIV的大小）。但是第二个可拖动的DIV不起作用，即使该方法与第一个可拖动的DIV相同。任何想法如何解决这一问题？

Javascript

使用Javascript

    var top1H, bottom1H;
      $( "#div1" ).draggable({
          axis: "y",
          start: function(event, ui) {
            shiftInitial = ui.position.top;
              top1H = $("#top1").height();
              bottom1H = $("#bottom1").height();
            },
          drag: function(event,ui) {
              var shift = ui.position.top;
              $("#top1").height(top1H + shift - shiftInitial);
              $("#bottom1").height(bottom1H - shift + shiftInitial);
            }
        });

    var right1W, left1W;
  $( "#div2" ).draggable({
          axis: "y",
          start: function(event, ui) {
            shiftInitial = ui.position.left;
              right1W = $("#right1").height();
              left1W = $("#left1").height();
            },
          drag: function(event,ui) {
              var shift = ui.position.left;
              $("#right1").height(right1W + shift - shiftInitial);
              $("#left1").height(left1W - shift + shiftInitial);
            }
        });

HTML

HTML

<div>
    <div id="left1">
    <div id="top1"></div>
    <div id="div1"></div>
    <div id="bottom1"></div>
  </div>
   <div id="div2"></div>
   <div id="right1"></div>
</div>

CSS

CSS

#div1 { 
  width:180px;
  height:6px;
  background-color:#e0e0e0;
  cursor:ns-resize;
  position: absolute;
}
#div2{
  width:6px;
  height:200px;
  background-color:#e0e0e0;
  float:left;
  cursor:ew-resize;
}
#top1{
  width:180px;
  height:100px;
  background-color:orange;
}
#bottom1 {
  width:180px;
  height:100px;
  background-color:blue;
}
#left1{
  width:180px;
  height:200px;
  float:left;
  background-color:orange;
}
#right1{
  height:200px;
  background-color:red;
  width:100%;
}

1 个解决方案

#1

Since you mentioned that you first dragable DIV works fine I fixed only the second one.

既然你提到你第一次可拖动DIV工作正常我只修复了第二个。

There are two problems with your code:

您的代码有两个问题：

1. You gave both draggable elements the axis: "y" attribute (while the second should be grad on X axis.
2. 你给了两个可拖动元素轴：“y”属性（而第二个应该是X轴上的grad。
3. The change on the second drag was supposed to be on the width (and not on the height).
4. 第二个拖动的变化应该在宽度上（而不是在高度上）。

$(function() {
        var top1H, bottom1H;
        var right1W, left1W;
        
        $( "#div1" ).draggable({
            axis: "y",
            start: function(event, ui) {
                shiftInitial = ui.position.top;
                top1H = $("#top1").height();
                bottom1H = $("#bottom1").height();
            },
            drag: function(event,ui) {
                var shift = ui.position.top;
                $("#top1").height(top1H + shift - shiftInitial);
                $("#bottom1").height(bottom1H - shift + shiftInitial);
            }
        });
        $( "#div2" ).draggable({
            axis: "x",
            start: function(event, ui) {
                shiftInitial = ui.position.left;
                right1W = $("#right1").width();
                left1W = $("#left1").width();
            },
            drag: function(event,ui) {
                var shift = ui.position.left;
                $("#left1 div").width(left1W + shift);
            }
        });
    });

#div1 { 
  width:180px;
  height:6px;
  background-color:#e0e0e0;
  cursor:ns-resize;
  position: absolute;
}
#div2{
  width:6px;
  height:200px;
  background-color:#e0e0e0;
  float:left;
  cursor:ew-resize;
  left: 180px;
}
#top1{
  width:180px;
  height:100px;
  background-color:orange;
}
#bottom1 {
  width:180px;
  height:100px;
  background-color:blue;
}
#left1{
  width:0;
  height:200px;
  float:left;
  background-color:orange;
}
#right1{
  height:200px;
  background-color:red;
  width:100%;
}

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>

<div>
  <div id="left1">
    <div id="top1"></div>
    <div id="div1"></div>
    <div id="bottom1"></div>
  </div>
  <div id="div2"></div>
  <div id="right1"></div>
</div>

Note that the code will NOT work if you drag the borders "outside" of the current block. To do so you will also need to check if the new width/height is bigger than the original and change all the elements accordingly.

请注意，如果将边框拖动到当前块的“外部”，则代码将不起作用。为此，您还需要检查新宽度/高度是否大于原始宽度，并相应地更改所有元素。

Update - allow change the height of the "red" box

(It's better to view this in "full page" mode)

（最好在“整页”模式下查看）

$(function() {
  var minHeight = $('#right1').height();
  var top1H, bottom1H;
  var right1W, left1W;

  $( "#div1" ).draggable({
    axis: "y",
    start: function(event, ui) {
      shiftInitial = ui.position.top;
      top1H = $("#top1").height();
      bottom1H = $("#bottom1").height();
    },
    drag: function(event,ui) {
      var shift = ui.position.top;
      $("#top1").height(top1H + shift - shiftInitial);
      $("#bottom1").height(bottom1H - shift + shiftInitial);
      $('#right1,#div2').height(Math.max(
        minHeight,
        Math.max(
          $('#top1').height()+$('#div1').height(),
          $('#top1').height()+$('#bottom1').height()
        )));
    }
  });
  $( "#div2" ).draggable({
    axis: "x",
    start: function(event, ui) {
      shiftInitial = ui.position.left;
      right1W = $("#right1").width();
      left1W = $("#left1").width();
    },
    drag: function(event,ui) {
      var shift = ui.position.left;
      //$("#right1").width(right1W - shift + shiftInitial);
      $("#left1 div").width(left1W + shift);
    }
  });
});

#div1 { 
  width:180px;
  height:6px;
  background-color:#e0e0e0;
  cursor:ns-resize;
  position: absolute;
}
#div2{
  width:6px;
  height:200px;
  background-color:#e0e0e0;
  float:left;
  cursor:ew-resize;
  left: 180px;
}
#top1{
  width:180px;
  height:100px;
  background-color:orange;
}
#bottom1 {
  width:180px;
  height:100px;
  background-color:blue;
}
#left1{
  width:0;
  height:200px;
  float:left;
  background-color:orange;
}
#right1{
  height:200px;
  background-color:red;
  width:100%;
}

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<div>
  <div id="left1">
    <div id="top1"></div>
    <div id="div1"></div>
    <div id="bottom1"></div>
  </div>
  <div id="div2"></div>
  <div id="right1"></div>
</div>

This version will not give you the option to "lower" the height of your blocks once the height changed.

一旦高度改变，此版本将不会为您提供“降低”块高度的选项。