[英]jqueryui resizeable and draggable element is covered
I have two elements which are draggable and resizeable. 我有两个可拖动和可调整大小的元素。 They are aline horizontally. 它们是水平的。 My problem is when I attempted to resize the first element at the top, the second element position below will automatically cover the first element. 我的问题是当我试图调整顶部的第一个元素时,下面的第二个元素位置将自动覆盖第一个元素。
Below is the style: 以下是风格:
<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>
Below is the jqueryui code: 下面是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"
});
Below is the html element: 下面是html元素:
<div id="request-grid" class="ui-widget-content">
</div>
<div id="bb-clist" class="ui-widget-content">
</div>
How will I solve this problem without the other element covering/overlapping the other element when resizing. 在调整大小时,如何在没有其他元素覆盖/重叠其他元素的情况下解决此问题。
Thanks. 谢谢。
<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"
});
});
Working Demo http://jsfiddle.net/cse_tushar/qkKV6/ 工作演示 http://jsfiddle.net/cse_tushar/qkKV6/
You can use a z-index value to overcome the overlapping issue. 您可以使用z-index值来克服重叠问题。
simply put a higher z-index value to your resizable element like, 只需将更高的z-index值放入可调整大小的元素中,如:
#ResizableElement
{
z-index: 10; //default is 1
}
an element with higher z-index value will always overlap other element. 具有较高z-index值的元素将始终与其他元素重叠。 you can also set a z-index value to your draggable element which will work too. 你也可以为你的draggable元素设置一个z-index值,它也可以工作。
$("#request-grid").draggable({ zIndex: 10 });
I was able to solve the problem using the solutions from these questions Restrict jQuery draggable items from overlapping/colliding with sibling elements and Draggable revert if outside this div and inside of other draggables (using both invalid and valid revert options) 我能够使用这些问题的解决方案来解决问题。 限制jQuery可拖动项目与兄弟元素重叠/碰撞, 如果在div之外和其他draggables内部,则拖拽恢复(使用无效和有效的恢复选项)
I was not using the term collision when searching my problem at first. 我最初在搜索问题时没有使用术语碰撞。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.