Jquery UI 可拖动不会调整其他 DIV 的大小

Posted 2023-03-06

【中文标题】Jquery UI 可拖动不会调整其他 DIV 的大小

【英文标题】：Jquery UI draggable doesn't resize other DIVs

【发布时间】：2016-11-12 08:29:08

【问题描述】：

In this plunk 我有三个DIVs 除以另外两个可拖动的DIVs（灰色）。当可拖动的DIVs 被向上/向下或向左/向右拖动时，其他DIVs 应调整大小。

第一个可拖动的 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",
          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

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

【参考方案1】：

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

你的代码有两个问题：

您为两个可拖动元素都赋予了axis: "y" 属性（而第二个应该是X 轴上的grad。 第二次拖动的变化应该是在宽度上（而不是在高度上）。

$(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>

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

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

（最好以“全页”模式查看）

$(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>

一旦高度改变，这个版本将不会让您选择“降低”块的高度。

【讨论】：

“相应地更改所有元素”是什么意思？

如果拖动水平边框并使橙色框的高度大于红色框的高度-红色框的高度不会改变。

@ps0604，你也需要代码来支持它吗？因为在你原来的问题中没有提到它。你检查我的答案了吗？

如果您能提供完整的答案，那就太好了。既然你已经回答了这个问题，我接受了你的回答。

在那里添加了另一个示例。