实现Jquery UI可排序和可调整大小

Question

我正在尝试实现排序并调整网格布局中的几个div的大小.

这是一个例子小提琴

但问题是,一旦我调整大小(使div更大)然后当我尝试排序时排序不正常.它不是正确对齐,而是从放置内部div的另一个div溢出.

调整大小不适合小提琴.这是我在调整大小后需要实现的正确结果(假设max-width resizable是外部div的宽度).但是在我的代码中,如果我尝试调整大小,元素是重叠的,如果我将它放在右侧,则元素溢出外部容器div.(在结果中)它没有发生,尝试将div {3}保持在div {2}的位置

我正在使用自举流体布局.所以div的大小与span类相同.这是我正在使用的代码

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

Answer 1

该死的!我只知道出了什么问题.我没有调用'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%的元素的高度.它留下了一些白色空间.有没有办法删除它并提出底部元素？

如果调整大小,它会完美对齐

例