拖动和调整 div 与另一个 div 重叠

Posted 2023-05-08

【中文标题】拖动和调整 div 与另一个 div 重叠

【英文标题】：Drag & Resize div overlapped other div

【发布时间】：2012-12-18 21:07:18

【问题描述】：

我是堆栈溢出的新手。我需要你的帮助。 我从网上获得了 jquery 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>

【参考方案1】：

您好，欢迎来到 ***！ 您遇到了可拖动容器的 z-index 问题。在 *** 上查看有关相同问题的此解决方案：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/

【讨论】：

您好 Simplyray，感谢您的帮助。不幸的是，它不符合我的要求。实际上，我在“调整” div 元素时遇到了这个问题。例如，我有 3 个具有调整大小功能的 div。当我调整第一个 div 的大小时，第二个 div（下一个调整大小的功能 div）自动移动到顶部。所以我想限制这种变化，这意味着当我调整一个 div 的大小时，下一个 div 应该看起来是同一个地方并且它不会受到影响。

您好，如果您调整 div 的大小，它们会相互影响：每次调整大小都会影响渲染。看看***.com/questions/6037464/… 的解决方案。