Jquery 拖放；调整与其他div重叠的div的大小

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

我的代码 CSS

.widget1
{
宽度：150px；最小高度：120px；边框：1px实心绿色；
}
.widget2
{
宽度：150px；最小高度：120px；边框：1px纯蓝色；
}
.widget3
{
宽度：150px；最小高度：120px；边框：1px纯黑；
}

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>

$（函数（）{
$（“.drag_resize”）.draggable（）.resizeable（）；
});

Html

虚拟内容1
虚拟内容2
虚拟内容3

大家好，欢迎来到stackoverflow！ 您遇到了可拖动容器的z索引问题。请看一下有关stackoverflow的相同问题的解决方案：

特别是“单击”功能-在您的情况下，这应该可以实现（未经测试）：

CSS:

您可以修改解决方案，并使用jquery Dragable自己的事件处理程序（drag）而不是“单击”处理程序：

干杯

------编辑：-------

更清洁、更简单的解决方案：

看看这个工作示例：

---

嗨，Simplyray，谢谢你的帮助。不幸的是，它不符合我的要求。实际上，我在“调整”div元素的大小时遇到了这个问题。例如，我有3个具有调整大小功能的div。当我调整第一个div的大小时，第二个div（下一个调整函数div）自动移到顶部。所以我想限制这种更改，这意味着当我调整一个div的大小时，下一个div应该在同一个位置，并且不会受到影响。嗨，如果调整div的大小，它们会相互影响：每次调整大小都会影响渲染。请看一看解决方案。

<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>

<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>

$('.drag_resize').click(function() {
        $(this).addClass('top').removeClass('bottom');
        $(this).siblings().removeClass('top').addClass('bottom');
        $(this).css("z-index", a++);
    });

.top {z-index: 2; position: relative}
.bottom {z-index: 1; position: relative}