Javascript JQuery UI可调整大小如果<；部门>；调整大小->；所有的兄弟姐妹都会搬家
嗨，我对我的三个div元素都使用and 基本Dom树如下所示： 所以基本上蓝色和红色是兄弟姐妹，橙色是父母 如果垂直调整Javascript JQuery UI可调整大小如果<；部门>；调整大小->；所有的兄弟姐妹都会搬家,javascript,jquery,css,jquery-ui,Javascript,Jquery,Css,Jquery Ui,嗨，我对我的三个div元素都使用and 基本Dom树如下所示： 所以基本上蓝色和红色是兄弟姐妹，橙色是父母 如果垂直调整蓝色，则红色会自动更改其位置，使它们之间的垂直空间保持不变。此问题不适用于可拖动，因此我可以通过拖动蓝色和红色来更改垂直距离，但每次我调整蓝色的大小时，红色也会垂直移动 如果我让蓝色垂直变大->红色向下移动，我不希望从优化的角度来看，你可以让蓝色垂直变大，直到它碰到红色的边界，然后就这样了。 我尝试了几种.css样式，但都不起作用 以下是我当前使用的.css： 这段代码应该
蓝色红色可拖动蓝色红色如果我让蓝色垂直变大->红色向下移动，我不希望从优化的角度来看，你可以让蓝色垂直变大，直到它碰到红色的边界，然后就这样了。 我尝试了几种.css样式，但都不起作用 以下是我当前使用的.css：
这段代码应该会给你一些想法。它用于调整蓝色框的大小，当它碰到红色框的顶部时停止。因此，首先请注意，您无法调整蓝色的大小，因为它开始与红色齐平。然后将红色沿对角线向下移动到右下角。现在，如果调整蓝色框的大小，它将触及红色框的约束 我只显示了约束的一侧（从蓝色到红色），以查看这是否有帮助，然后再将其应用于（从红色到蓝色）。实际上，至少有4个约束：顶部、底部、左侧、右侧 请注意我添加的两个css位置属性
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>OOIndex</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<style>
/*div {
outline: 1px solid black;
height: 100%;
width: 100%;
height: 200px;
width: 200px;
min-height: 30px;
min-width: 500px;
}*/
.resizable {
width: 150px;
height: 150px;
padding: 0.5em;
}
.orange {
height: 100%;
width: 100%;
background-color: orange;
/*added*/
position: absolute;
}
.blue {
background-color: blue;
width: 150px;
height: 150px;
padding: 0.5em;
}
.red {
background-color: red;
width: 150px;
height: 150px;
padding: 0.5em;
/*added*/
position: fixed;
}
</style>
<script type="text/javascript">
$(function () {
var targetRed = $('.red').position();
$("#redPos").text("left " + targetRed.left + " top" + targetRed.top)
var targetBlue = $('.blue').position();
$("#bluePos").text("left " + targetBlue.left + " top" + targetBlue.top)
$('#blueResiz').resizable({
resize: function (event, ui) {
targetPos = $('.red').position();
$("#redPos").text("left " + targetPos.left + " top" + targetPos.top)
var added = ui.position.top + ui.size.height;
$("#bluePos").text("top " + ui.position.top + " height" + ui.size.height + " total " + added)
//if blue
if (ui.position.top + ui.size.height < targetPos.top) {
$(this).resizable({ maxHeight: targetPos.top - 20 });
}
}
});
$('#redDrag').draggable({
drag: function (event, ui) {
targetPos = $('.red').position();
}
})
})
</script>
</head>
<body class="orange">
<div class="blue draggable" id="blueResiz">
<div id="bluePos"></div>
</div>
<div class="red draggable" id="redDrag">
<div id="redPos"></div>
</div>
</body>
</html>
OOIndex
/*div{
外形：1px纯黑；
身高：100%；
宽度：100%；
高度：200px；
宽度：200px；
最小高度：30px；
最小宽度：500px；
}*/
.可调整大小{
宽度：150px；
高度：150像素；
填充：0.5em；
}
.橙色{
身高：100%；
宽度：100%；
背景颜色：橙色；
/*增加*/
位置：绝对位置；
}
蓝先生{
背景颜色：蓝色；
宽度：150px；
高度：150像素；
填充：0.5em；
}
瑞德先生{
背景色：红色；
宽度：150px；
高度：150像素；
填充：0.5em；
/*增加*/
位置：固定；
}
$（函数（）{
var targeted=$（'.red'）.position（）；
$（“#redPos”）.text（“左”+targeted.left+“顶”+targeted.top）
var targetBlue=$（'.blue'）.position（）；
$（“#bluePos”）.text（“左”+targetBlue.left+“顶”+targetBlue.top）
$（'#blueResiz'）。可调整大小({
调整大小：函数（事件、ui）{
targetPos=$（'.red'）.position（）；
$（“#redPos”）.text（“左”+targetPos.left+“顶”+targetPos.top）
添加的变量=ui.position.top+ui.size.height；
$（“#bluePos”）.text（“top”+ui.position.top+“height”+ui.size.height+“total”+已添加）
//如果蓝色
如果（ui.position.top+ui.size.heightjqueryui resizeableposition:relative到每个可调整大小的
元素。
我这样向自己解释：
这意味着红色的正常位置直接位于蓝色下方，但由于我们添加了draggable
，我们可以通过向下拖动红色来获得20px的空间
如果调整蓝色的大小，则向下移动红色将保留20px的空间
当我们使用位置时
：绝对！重要的；然后红色总是被定位
""
哪个是橙色的
/*overrides the '.ui-resizable' 'position:relative;' this helps that after resizing the position of the element
get placed relative to its parent <div>*/
position: absolute !important;
/*覆盖“.ui可调整大小”位置：相对；'这有助于在调整元素位置的大小后
相对于其父对象放置*/
位置：绝对！重要的；
您能用codepen或其他语言提供一个工作示例吗？根据我的理解，你是说调整蓝色的大小和预期的一样，但是当你拖动蓝色然后调整它的大小时，红色会移动…在某个地方？好的，我试着给出一个JSFIDDLE如果我使蓝色垂直变大->红色向下移动，我不希望从优化的角度来看，你可以让蓝色垂直变大，直到它碰到红色的边界，然后就这样了。@ViktorCarlson听起来你在寻找各种元素之间的碰撞检测。这样您就无法调整某些内容的大小以与页面上的另一个元素重叠。这是正确的吗？是的，确切地说，已经有可能设置参数包含：“parent
，它可以工作，蓝色和红色不能在其父级之外调整大小/拖动，我需要一个参数，如包含：“兄弟姐妹”