拖動和調整div重疊其他div

我是堆棧溢出的新來者。我需要你的幫助。我從網上得到了jquery調整窗口小部件，並試圖實現我的源代碼。它工作正常只有一個小部件。如果我將相同的調整大小功能放在同一頁面中的多個小部件上，它將在小部件調整大小時重疊。還有一個信息，當我調整上一個小部件時，它不會影響（重疊）給其他人。拖動和調整div重疊其他div

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

來源

2013-01-04 user1948446

您好，歡迎計算器！您正遇到可拖動容器的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/

來源

2013-01-04 12:17:30 simplyray

嗨Simplyray，感謝您的幫助。不幸的是，它不符合我的要求。其實我在面對這個問題時，「調整」div元素。例如，我有3個調整功能的div。當我調整第一個div，第二個div（下一個調整功能div）自動移動到頂部。所以我想限制這種變化，這意味着當我調整一個div時，下一個div應該看起來是相同的地方，它不會受到影響。 – user1948446

嗨，如果你調整你的divs，他們會與eachother互動：每個resize都會影響渲染。看看http://stackoverflow.com/questions/6037464/how-to-prevent-resizable-and-draggable-elements-from-collapsing-on-each-other/6204793#6204793的解決方案。 – simplyray

拖動和調整div重疊其他div

回答

相關問題