我是堆栈溢出的新来者。我需要你的帮助。 我从网上获得了jquery resize小部件并尝试实现我的源代码。它仅适用于一个小部件。如果我将相同的resize函数放在同一页面中的多个窗口小部件中,则在窗口小部件调整大小时会重叠。当我调整最后一个小部件时,还有一个信息,它不会受到影响(重叠)到其他小部件。
我的代码 CSS
<style>
.widget1
{
width:150px; min-height:120px; border:1px solid green;
}
.widget2
{
width:150px; min-height:120px; border:1px solid blue;
}
.widget3
{
width:150px; min-height:120px; border:1px solid black;
}
</style>
使用Js
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
$(function() {
$(".drag_resize").draggable().resizable();
});
</script>
HTML
<div class="widget1 drag_resize">
Dummy contents 1
</div>
<div class="widget2 drag_resize">
Dummy contents 2
</div>
<div class="widget3 drag_resize">
Dummy contents 3
</div>
答案 0 :(得分:0)
嗨,欢迎来到stackoverflow! 您遇到了可拖动容器的z-index问题。在stackoverflow上查看有关同一问题的此解决方案:Setting z-index on draggable elements
特别是“点击”功能 - 在你的情况下,这应该是技巧(未经测试):
$('.drag_resize').click(function() {
$(this).addClass('top').removeClass('bottom');
$(this).siblings().removeClass('top').addClass('bottom');
$(this).css("z-index", a++);
});
CSS:
.top {z-index: 2; position: relative}
.bottom {z-index: 1; position: relative}
您可以修改您的解决方案并使用jquery draggable自己的事件处理程序(拖动)而不是“click”处理程序: http://jqueryui.com/draggable/#events
干杯
<强> -------------编辑:------------- 强>
清洁&amp;更轻松的解决 Setting z-index on draggable elements
看看这个工作示例: http://jsfiddle.net/RhF7t/