ps0604 ps0604 - 4 months ago 17
jQuery Question

Jquery UI draggable doesn't resize other DIVs

In this plunk I have three

DIV
s divided by two other
DIV
s that are draggable (gray color). When the draggable
DIV
s are dragged up/down or left/right, the other
DIV
s 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%;
}

Answer

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. The change on the second drag was supposed to be on the width (and not on the height).

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

Comments