- 首页
- 前端开发
- Jquery UI 可拖动不会调整其他 DIV 的大小
Jquery UI 可拖动不会调整其他 DIV 的大小
[英] Jquery UI draggable doesn't resize other DIVs
本文介绍了Jquery UI 可拖动不会调整其他 DIV 的大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在这个 plunk 我有三个 DIV 除以另外两个 DIV 是可拖动的(灰色).当可拖动的 DIV 被向上/向下或向左/向右拖动时，其他 DIV 应调整大小.
第一个可拖动的 DIV 工作正常(左边的那个垂直调整其他 DIV 的大小).但是第二个可拖动的 DIV 不起作用，即使方法与第一个可拖动的 DIV 相同.任何想法如何解决这个问题?
Javascript
var top1H, bottom1H;$( "#div1" ).draggable({轴:y"，开始:功能(事件，用户界面){shiftInitial = ui.position.top;top1H = $("#top1").height();bottom1H = $("#bottom1").height();},拖动:函数(事件，用户界面){var shift = ui.position.top;$("#top1").height(top1H + shift - shiftInitial);$("#bottom1").height(bottom1H - shift + shiftInitial);}});var right1W, left1W;$( "#div2" ).draggable({轴:y"，开始:功能(事件，用户界面){shiftInitial = ui.position.left;right1W = $("#right1").height();left1W = $("#left1").height();},拖动:函数(事件，用户界面){var shift = ui.position.left;$("#right1").height(right1W + shift - shiftInitial);$("#left1").height(left1W - shift + shiftInitial);}});
HTML
<div id="left1"><div id="top1"></div><div id="div1"></div><div id="bottom1"></div>
<div id="div2"></div><div id="right1"></div>
CSS
#div1 {宽度:180px；高度:6px；背景色:#e0e0e0;游标:ns-调整大小；位置:绝对；}#div2{宽度:6px；高度:200px；背景色:#e0e0e0;向左飘浮;光标:新调整大小；}#top1{宽度:180px；高度:100px；背景颜色:橙色；}#bottom1 {宽度:180px；高度:100px；背景颜色:蓝色；}#left1{宽度:180px；高度:200px；向左飘浮;背景颜色:橙色；}#right1{高度:200px；背景颜色:红色；宽度:100%；}
解决方案
既然你提到第一个可拖动 DIV 工作正常，我只修复了第二个.
您的代码有两个问题:
- 您为两个可拖动元素提供了
axis: "y" 属性(而第二个应该是 X 轴上的 grad. - 第二次拖动的变化应该是在宽度上(而不是在高度上).
$(function() {var top1H, bottom1H;var right1W, left1W;$( "#div1" ).draggable({轴:y"，开始:功能(事件，用户界面){shiftInitial = ui.position.top;top1H = $("#top1").height();bottom1H = $("#bottom1").height();},拖动:函数(事件，用户界面){var shift = ui.position.top;$("#top1").height(top1H + shift - shiftInitial);$("#bottom1").height(bottom1H - shift + shiftInitial);}});$( "#div2" ).draggable({轴:x"，开始:功能(事件，用户界面){shiftInitial = ui.position.left;right1W = $("#right1").width();left1W = $("#left1").width();},拖动:函数(事件，用户界面){var shift = ui.position.left;$("#left1 div").width(left1W + shift);}});});
#div1 {宽度:180px；高度:6px；背景色:#e0e0e0;游标:ns-调整大小；位置:绝对；}#div2{宽度:6px；高度:200px；背景色:#e0e0e0;向左飘浮;光标:新调整大小；左:180px；}#top1{宽度:180px；高度:100px；背景颜色:橙色；}#bottom1 {宽度:180px；高度:100px；背景颜色:蓝色；}#left1{宽度:0；高度:200px；向左飘浮;背景颜色:橙色；}#right1{高度:200px；背景颜色:红色；宽度:100%；}
<script src="//code.jquery.com/jquery-2.1.3.min.js"></脚本><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 id="div2"></div><div id="right1"></div>
<块引用>请注意，如果您将边框拖到当前块的外部"，该代码将不起作用.为此，您还需要检查新的宽度/高度是否大于原始宽度，并相应地更改所有元素.
更新 - 允许更改红色"框的高度
(最好在整页"模式下查看)
$(function() {var minHeight = $('#right1').height();var top1H, bottom1H;var right1W, left1W;$( "#div1" ).draggable({轴:y"，开始:功能(事件，用户界面){shiftInitial = ui.position.top;top1H = $("#top1").height();bottom1H = $("#bottom1").height();},拖动:函数(事件，用户界面){var shift = ui.position.top;$("#top1").height(top1H + shift - shiftInitial);$("#bottom1").height(bottom1H - shift + shiftInitial);$('#right1,#div2').height(Math.max(最小高度，数学.max($('#top1').height()+$('#div1').height(),$('#top1').height()+$('#bottom1').height())));}});$( "#div2" ).draggable({轴:x"，开始:功能(事件，用户界面){shiftInitial = ui.position.left;right1W = $("#right1").width();left1W = $("#left1").width();},拖动:函数(事件，用户界面){var shift = ui.position.left;//$("#right1").width(right1W - shift + shiftInitial);$("#left1 div").width(left1W + shift);}});});
#div1 {宽度:180px；高度:6px；背景色:#e0e0e0;游标:ns-调整大小；位置:绝对；}#div2{宽度:6px；高度:200px；背景色:#e0e0e0;向左飘浮;光标:新调整大小；左:180px；}#top1{宽度:180px；高度:100px；背景颜色:橙色；}#bottom1 {宽度:180px；高度:100px；背景颜色:蓝色；}#left1{宽度:0；高度:200px；向左飘浮;背景颜色:橙色；}#right1{高度:200px；背景颜色:红色；宽度:100%；}
<script src="//code.jquery.com/jquery-2.1.3.min.js"></脚本><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 id="div2"></div><div id="right1"></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:
- You gave both draggable elements the
axis: "y" attribute (while the second should be grad on X axis.
- 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.
这篇关于Jquery UI 可拖动不会调整其他 DIV 的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
