jqueryui可調整大小和可拖動元素被覆蓋

Question

我有兩個可拖動和可調整大小的元素。它們是水平的。 我的問題是當我試圖調整頂部的第一個元素時，下面的第二個元素位置將自動覆蓋第一個元素。

下面是風格：

<style> 
    #request-grid { width: 500px; min-height: 200px; margin: 10px; padding: 0.5em;} 
    #bb-clist { width: 500px; min-height: 200px; margin: 10px; padding: 0.5em;} 
    .ui-resizable-helper { border: 2px dotted #00F; } 
</style> 

下面是jQueryUI的代碼：

$("#request-grid").draggable({containment: "#content", scroll: true, stack: "#content div" }); 
$("#bb-clist").draggable({containment: "#content", scroll:true, stack: "#content div"}); 

$("#request-grid").resizable({ 
helper: "ui-resizable-helper", containment: "#content" 
}); 

$("#bb-clist").resizable({ 
helper: "ui-resizable-helper", containment: "#content" 
}); 

下面是html元素：

<div id="request-grid" class="ui-widget-content"> 
</div> 

<div id="bb-clist" class="ui-widget-content"> 
</div> 

我將如何解決這個問題，而不其他元素在調整大小時覆蓋/重疊另一個元素。

謝謝。

Answer 1

HTML

<div> 
    <div id="request-grid"></div> 
    <br/> 
    <div id="bb-clist"></div> 
</div> 

CSS

#request-grid { 
    height:100px; 
    width: 200px; 
    min-height: 100px; 
    margin: 10px; 
    padding: 0.5em; 
    background-color:pink; 
} 
#bb-clist { 
    height:100px; 
    width: 200px; 
    min-height: 100px; 
    margin: 10px; 
    padding: 0.5em; 
    background-color:blue; 
} 
.ui-resizable-helper { 
    border: 2px dotted #00F; 
} 

jQuery的

$(document).ready(function() { 

    $("#request-grid").draggable({ 
     containment: "#document", 
     scroll: false, 
     stack: "#content div" 
    }); 
    $("#bb-clist").draggable({ 
     containment: "#document", 
     scroll: false, 
     stack: "#content div" 
    }); 

    $("#request-grid").resizable({ 
     helper: "ui-resizable-helper", 
     containment: "document", 
     resize: function (event, ui) { 
      var height = (ui.size.height + 'px'); 
      $('#bb-clist').css('posotion', 'absolute').css('top', height); 
     }, 
     stop: function (event, ui) { 
      var h2 = (ui.size.height); 
      if (h2 < 200) { 
       h2 = 100; // set default min-height if re-sized less than min-height. 
      } 
      $('#bb-clist').css('posotion', 'absolute').css('top', h2); 
     } 

    }); 

    $("#bb-clist").resizable({ 
     helper: "ui-resizable-helper", 
     containment: "document" 
    }); 
}); 

工作d emohttp://jsfiddle.net/cse_tushar/qkKV6/

Answer 2

您可以使用z-index值來解決重疊問題。

只是提出了更高的z-index值的可調整大小的元素一樣，

#ResizableElement 
{ 
    z-index: 10; //default is 1 
} 

元素具有較高的z-index值總是重疊的其他元素。 你也可以爲你的可拖動元素設置一個z-index值，它也可以工作。

$("#request-grid").draggable({ zIndex: 10 }); 

Answer 3

我能解決使用解決方案，從最初搜索我的問題時，我並沒有使用術語碰撞這些問題Restrict jQuery draggable items from overlapping/colliding with sibling elements 和Draggable revert if outside this div and inside of other draggables (using both invalid and valid revert options)

問題。