我有两个可拖动和可调整大小的元素。它们是水平的。 我的问题是当我试图调整顶部的第一个元素时,下面的第二个元素位置将自动覆盖第一个元素。
以下是风格:
<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>
以下是jqueryui代码:
$( "#request-grid" ).draggable({containment: "#content", scroll: true, stack: "#content div" });
$( "#bb-clist" ).draggable({containment: "#content", scroll:true, stack: "#content div"});
$( "#request-grid" ).resizable({
helper: "ui-resizable-helper", containment: "#content"
});
$( "#bb-clist" ).resizable({
helper: "ui-resizable-helper", containment: "#content"
});
以下是html元素:
<div id="request-grid" class="ui-widget-content">
</div>
<div id="bb-clist" class="ui-widget-content">
</div>
如果在调整大小时没有其他元素覆盖/重叠其他元素,我将如何解决此问题。
感谢。
答案 0 :(得分:2)
<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"
});
});
答案 1 :(得分:0)
您可以使用z-index值来克服重叠问题。
只需将更高的z-index值放入可调整大小的元素,例如
#ResizableElement
{
z-index: 10; //default is 1
}
具有较高z-index值的元素将始终与其他元素重叠。 你也可以为你的可拖动元素设置一个z-index值,它也可以工作。
$("#request-grid").draggable({ zIndex: 10 });
答案 2 :(得分:0)