![](/img/trans.png)
[英]JqueryUI Drag: Cursor not at the same position as draggable element
[英]jqueryui resizeable and draggable element is covered
我有两个可拖动和可调整大小的元素。 它们是水平的。 我的问题是当我试图调整顶部的第一个元素时,下面的第二个元素位置将自动覆盖第一个元素。
以下是风格:
<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>
在调整大小时,如何在没有其他元素覆盖/重叠其他元素的情况下解决此问题。
谢谢。
<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"
});
});
您可以使用z-index值来克服重叠问题。
只需将更高的z-index值放入可调整大小的元素中,如:
#ResizableElement
{
z-index: 10; //default is 1
}
具有较高z-index值的元素将始终与其他元素重叠。 你也可以为你的draggable元素设置一个z-index值,它也可以工作。
$("#request-grid").draggable({ zIndex: 10 });
我能够使用这些问题的解决方案来解决问题。 限制jQuery可拖动项目与兄弟元素重叠/碰撞, 如果在div之外和其他draggables内部,则拖拽恢复(使用无效和有效的恢复选项)
我最初在搜索问题时没有使用术语碰撞。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.