jquery - 拖动和调整 div 与其他 div 重叠

Question

我是堆栈溢出的新手。我需要你的帮助。我从网上得到了 jquery resize widget 并试图实现我的源代码。它只有一个小部件可以正常工作。如果我将相同的调整大小功能用于同一页面中的多个小部件，它会在小部件调整大小时重叠。还有一个信息，当我调整最后一个小部件的大小时，它不会影响(重叠)到其他人。

我的代码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>

Answer 1

您好，欢迎来到 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 可拖动自己的事件处理程序(拖动)而不是“单击”处理程序: http://jqueryui.com/draggable/#events

干杯

------------编辑:------------

更清洁、更简单的解决方案: Setting z-index on draggable elements

看看这个工作示例: http://jsfiddle.net/RhF7t/