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.