拖动和调整div重叠的其他div

我是堆栈溢出的新人。 我需要你的帮助。 我从网上获得了jquery resize小部件，并尝试实现我的源代码。 它仅适用于一个小部件。 如果我将相同的resizefunction放在同一页面中的多个小部件中，它会在小部件resize时重叠。 当我调整最后一个小部件时，还有一个信息，它不会受到影响（重叠）到其他小部件。

我的代码CSS

 .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; }  

Js二手

     $(function() { $(".drag_resize").draggable().resizable(); });  

HTML

 
 Dummy contents 1 
 
 Dummy contents 2 
 
 Dummy contents 3  

Answer 1

嗨，欢迎来到stackoverflow！ 您遇到了可拖动容器的z-index问题。 在stackoverflow上查看有关同一问题的解决方案： 在可拖动元素上设置z-index

特别是“点击”function – 在你的情况下，这应该做的伎俩（未经测试）：

 $('.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

干杯

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

更清晰，更简单的解决方案： 在可拖动元素上设置z-index

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