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

In this plunk 我有三个DIV被另外两个可拖动的DIV(灰色)分开.当可拖动的DIV向上/向下或向左/向右拖动时,其他DIV应调整大小.

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

使用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",ui) {
            shiftinitial = ui.position.left;
              right1W = $("#right1").height();
              left1W = $("#left1").height();
            },ui) {
              var shift = ui.position.left;
              $("#right1").height(right1W + shift - shiftinitial);
              $("#left1").height(left1W - shift + shiftinitial);
            }
        });

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

#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%;
}

解决方法

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

您的代码有两个问题：

>你给了两个可拖动元素的轴：“y”属性(而第二个应该在X轴上渐变.
>第二个拖动的变化应该在宽度上(而不是在高度上).

$(function() {
        var top1H,bottom1H;
        var right1W,left1W;
        
        $( "#div1" ).draggable({
            axis: "y",ui) {
                shiftinitial = ui.position.top;
                top1H = $("#top1").height();
                bottom1H = $("#bottom1").height();
            },ui) {
                var shift = ui.position.top;
                $("#top1").height(top1H + shift - shiftinitial);
                $("#bottom1").height(bottom1H - shift + shiftinitial);
            }
        });
        $( "#div2" ).draggable({
            axis: "x",ui) {
                shiftinitial = ui.position.left;
                right1W = $("#right1").width();
                left1W = $("#left1").width();
            },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.

更新 – 允许更改“红色”框的高度

(最好在“全页”模式下查看此内容)

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

  $( "#div1" ).draggable({
    axis: "y",ui) {
      shiftinitial = ui.position.top;
      top1H = $("#top1").height();
      bottom1H = $("#bottom1").height();
    },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",ui) {
      shiftinitial = ui.position.left;
      right1W = $("#right1").width();
      left1W = $("#left1").width();
    },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.

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

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

解决方法

相关推荐