拖曳调整div的大小与其他div重叠 [英] Drag & Resize div overlapped other div

问题描述

我是堆栈溢出的新来者.我需要你的帮助. 我从网上获得了jQuery调整大小小部件，并尝试实现我的源代码.它只能正常工作一个小部件.如果我在同一页面中将相同的调整大小功能放到多个小部件中，则在调整小部件大小时会重叠.还有一个信息，当我调整最后一个小部件的大小时，它不会影响其他小部件(重叠).

I m a new comer for stack overflow. I need your help. I got jquery resize widget from online and tried to implement my source. It works fine only one widget. If i put the same resize function to multi widget in the same page, it gets overlapped while a widget resize. And one more information when i resize last widget, its not affected (overlapped) to others.

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

使用过的剑

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

推荐答案

欢迎来到stackoverflow！ 您遇到了可拖动容器的z-index问题.看看关于同一问题的stackoverflow解决方案:在可拖动元素

Hi and welcome to stackoverflow! You're running into a z-index problem of the draggable containers. Take a look at this solution on stackoverflow regarding the same issue: Setting z-index on draggable elements

尤其是点击"功能-在您的情况下，这应该可以解决问题(未测试):

Especially the "click" function - in your case this should do the trick (untested):

$('.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可拖动的自己的事件处理程序(拖动)代替"click"处理程序: http://jqueryui.com/draggable/#events

You might modify your solution and use jquery draggable own event handlers (drag) instead of the "click" handler: http://jqueryui.com/draggable/#events

欢呼

--------------------------

清洁剂&更简单的解决方案: 在可拖动元素上设置z-index

Cleaner & easier solution: Setting z-index on draggable elements

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

Take a look at this working example: http://jsfiddle.net/RhF7t/

这篇关于拖曳调整div的大小与其他div重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！