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",
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%;
}
最佳答案
既然你提到你第一个可拖动的 DIV
工作正常,我只修复了第二个。
您的代码有两个问题:
- 您为两个可拖动元素赋予了
axis: "y"
属性(而第二个元素应该在X
轴上渐变。 - 第二次拖动的变化应该是宽度(而不是高度)。
$(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.
更新 - 允许更改“红色”框的高度
(最好以“全页”模式查看)
$(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.
关于javascript - Jquery UI 可拖动不会调整其他 DIV 的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38289204/