2012-07-27 55 views
4

我「米試圖實現一種與調整對於像佈局網格幾個div。實現jQuery UI的排序和resizable一起

這是一個例子fiddle

但問題是,一旦我調整大小(使div更大),然後當我嘗試排序排序工作不正常。而不是正確對齊它溢出了內部div的其他div的地方。

調整大小不起作用這是正確的result,我需要實現調整大小後(假設最大寬度resiza ble是外部div的寬度)。但在我的代碼中,如果我嘗試調整大小,元素是重疊的,如果將它放在右側,則元素溢出外部容器div。 (在result)它不會發生,請嘗試在div {2}的位置保留div {3}

我正在使用引導程序流體佈局。所以div的大小與跨度類。這是我正在使用的代碼

<div class="row-fluid" id="sortable"> 
      <div class="span6 sort_container"> <div class="well">aaaaaaaaaaaaa</div> </div> 
      <div class="span6 sort_container"> <div class="well">bbbbbbbbbbbbb</div> </div> 
      <div class="span6 sort_container" > <div class="well">ccccccccccc</div> </div> 
      <div class="span6 sort_container"> <div class="well">dddddddddddd</div> </div> 
      <div class="span6 sort_container"> <div class="well">eeeeeeeeeeee</div> </div> 
     </div> 

<script> 

$(document).ready(function() { 
    $(function() { 
     $("#sortable").sortable(); 
    }); 

$(function() { 
     $('.well').resizable(); 
    }); 
}); 
</script> 
+0

'resizable'在你的jsfiddle – 2012-07-27 12:08:13

+1

不工作我操縱它顯示的縮放柄[這裏](http://jsfiddle.net/dmdGj/38 /) – AbstractChaos 2012-07-27 12:10:01

+0

@AbstractChaos似乎調整大小在這裏工作得很好,現在在小提琴中......但不是在我的代碼中。我另外:我使用引導流體佈局。所以div的大小與跨度類。 – 2012-07-27 12:13:26

回答

5

該死!我只知道出了什麼問題。我沒有調用'sort_container'類,而是調用'.well',它是具有resizable()函數的元素的內部div。

這解決了它

<div class="row-fluid" id="sortable"> 
      <div class="span6 sort_container"> <div class="well">aaaaaaaaaaaaa</div> </div> 
      <div class="span6 sort_container"> <div class="well">bbbbbbbbbbbbb</div> </div> 
      <div class="span6 sort_container" > <div class="well">ccccccccccc</div> </div> 
      <div class="span6 sort_container"> <div class="well">dddddddddddd</div> </div> 
      <div class="span6 sort_container"> <div class="well">eeeeeeeeeeee</div> </div> 
     </div> 

<script> 

$(document).ready(function() { 
    $(function() { 
     $("#sortable").sortable(); 
    }); 

$(function() { 
     $('.sort_container').resizable(); 
    }); 
}); 
</script> 

現在唯一的問題是嘗試增加高度爲元素的約150%。它留下一些白色的空間。是否有任何方法可以刪除並提出底部元素?

它完全對齊如果調整horizo​​ntaly

example