jquery - 一起实现可排序和可调整大小的 Jquery UI

Question

我正在尝试为网格状布局中的几个 div 实现排序和调整大小。

这是一个例子 fiddle

但问题是一旦我调整大小(使 div 变大)，然后当我尝试排序时，排序工作不正常。它没有正确对齐，而是溢出了放置内部 div 的另一个 div。

调整大小不适用于 fiddle 。这是正确的 result我需要在调整大小后实现(假设 max-width resizable 是外部 div 的宽度)。但在我的代码中，如果我尝试调整大小，元素会重叠，如果我将它放在右侧，元素会溢出外部容器 div。 (在 result 中)它没有发生，尝试将 div{3} 保持在 div{2}

的位置

我正在使用 Bootstrap 流体布局。所以 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%。它留下了一些空白der。 der 有什么方法可以删除它并调出底部元素吗？

如果水平调整大小，它会完美对齐

example