Jquery UI draggable不调整其他DIV的大小 [英] Jquery UI draggable doesn't resize other DIVs

查看：131
本文介绍了Jquery UI draggable不调整其他DIV的大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在这个plunk 中，我有三个 DIV 除以另外两个可拖动（灰色）的 DIV 。当向上/向下或向左/向右拖动可拖动 DIV 时，应调整其他 DIV / p>

第一个可拖动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事件，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-colour：＃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 工作正常我只修复了第二个。
 
 
 
您的代码有两个问题：
     
     
  1. 您为两个可拖动元素赋予了 axis：y属性 c 
    2.  
     
  2. 第二次拖动的变化应该在宽度上（而不是高度上）。 
    3.  
     
 
 
 
  $（function top1H，bottom1H; var right1W，left1W; $（＃div1）.draggable（{axis：y，start：function（event，ui）{shiftInitial = ui.position.top; top1H = $ ）.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 =stylesheethref =// 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>  
 
 
 
 
 
请注意，如果您拖动当前块的外部边框，代码将 NOT 工作。为此，您还需要检查新的宽度/高度是否大于原始宽度/高度，并相应地更改所有元素。
 
 
 
 
 
更新 - 允许更改红色框的高度
 
 
 
（最好在全页模式下查看此项）
 
 
 
 
 
 
  $（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（）+ $（'＃bottom1'）。height（）+ $（'＃div1'）。 ; }}）; $（＃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 =stylesheethref =// 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>  
 
 
 
 
 
这个版本不会让你选择降低高度改变后块的高度。
 
 
 
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.



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?



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



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



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. 

  2. The change on the second drag was supposed to be on the width (and not on the height).
    3. 





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




                        
这篇关于Jquery UI draggable不调整其他DIV的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆