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%;
}
Since you mentioned that you first dragable DIV
works fine I fixed only the second one.
There are two problems with your code:
axis: "y"
attribute (while the second should be grad on X
axis. $(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.
(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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With