Javascript 包括jqueryui可调整大小和可拖动的元素

我有两个元素，可拖动和可调整大小。它们水平排列。 我的问题是，当我试图调整顶部第一个元素的大小时，下面的第二个元素位置将自动覆盖第一个元素

风格如下：

<style>
    #request-grid { width: 500px; min-height: 200px; margin: 10px; padding: 0.5em;}
    #bb-clist { width: 500px; min-height: 200px; margin: 10px; padding: 0.5em;}
    .ui-resizable-helper { border: 2px dotted #00F; }
</style>

下面是html元素：

<div id="request-grid" class="ui-widget-content">
</div>

<div id="bb-clist" class="ui-widget-content">
</div>

在调整大小时，如果其他元素不覆盖/重叠其他元素，我将如何解决此问题

---

谢谢。

您可以使用z索引值来克服重叠问题

只需为可调整大小的元素添加更高的z索引值，如

#ResizableElement
{
  z-index: 10;    //default is 1
}

具有较高z索引值的元素将始终与其他元素重叠。 您还可以为您的可拖动元素设置一个z索引值，这也会起作用

$("#request-grid").draggable({ zIndex: 10 });

---

我能够用这些问题的解决方案来解决这个问题 及

开始搜索问题时，我没有使用术语冲突。

HTML jQuery

$（文档）.ready（函数（）{
$（“#请求网格”）.draggable({
遏制：“文件”，
卷轴：错，
堆栈：“#内容分区”
});
美元（“#bb clist”）。可拖动({
遏制：“文件”，
卷轴：错，
堆栈：“#内容分区”
});
$（“#请求网格”）。可调整大小({
助手：“ui可调整大小的助手”，
遏制：“文件”，
调整大小：函数（事件、ui）{
变量高度=（ui.size.height+'px'）；
$（'bb clist'）.css（'posotion'，'absolute'）.css（'top'，height）；
},
停止：功能（事件、用户界面）{
var h2=（ui.size.height）；
if（h2<200）{
h2=100；//如果重新调整的大小小于最小高度，则设置默认最小高度。
}
$（'bb clist'）.css（'posotion'，'absolute'）.css（'top'，h2）；
}
});
$（“#bb clist”）。可调整大小({
助手：“ui可调整大小的助手”，
遏制：“文件”
});
});

---

工作演示

演示：@ArunPJohny您能告诉我您做了哪些更改吗？我似乎不明白。谢谢。这两个元素都可以调整大小，也可以拖动。行吗？我想他们两个都会有相同的zIndex。我想这种情况可能行不通，我不确定。由于时间不够，我无法编辑我的回复，但我想你已经找到了解决方案：）如果它对你有用，那就好了。请接受对您有效的回复，以便其他人可以从中受益。

$("#request-grid").draggable({ zIndex: 10 });

<div>
    <div id="request-grid"></div>
    <br/>
    <div id="bb-clist"></div>
</div>

#request-grid {
    height:100px;
    width: 200px;
    min-height: 100px;
    margin: 10px;
    padding: 0.5em;
    background-color:pink;
}
#bb-clist {
    height:100px;
    width: 200px;
    min-height: 100px;
    margin: 10px;
    padding: 0.5em;
    background-color:blue;
}
.ui-resizable-helper {
    border: 2px dotted #00F;
}

$(document).ready(function () {

    $("#request-grid").draggable({
        containment: "#document",
        scroll: false,
        stack: "#content div"
    });
    $("#bb-clist").draggable({
        containment: "#document",
        scroll: false,
        stack: "#content div"
    });

    $("#request-grid").resizable({
        helper: "ui-resizable-helper",
        containment: "document",
        resize: function (event, ui) {
            var height = (ui.size.height + 'px');
            $('#bb-clist').css('posotion', 'absolute').css('top', height);
        },
        stop: function (event, ui) {
            var h2 = (ui.size.height);
            if (h2 < 200) {
                h2 = 100; // set default min-height if re-sized less than min-height.
            }
            $('#bb-clist').css('posotion', 'absolute').css('top', h2);
        }

    });

    $("#bb-clist").resizable({
        helper: "ui-resizable-helper",
        containment: "document"
    });
});