4

我正在尝试在类似网格的布局中为几个 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>
4

2 回答 2

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% 的元素的高度。它留下了一些空白。有什么方法可以删除它并调出底部元素吗？

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

例子

于 2012-07-27T12:25:07.413 回答
-1

$(function() { $(".column").sortable({ connectWith : ".column", cursor : "move", handle : ".portlet-header", cancel : ".portlet-toggle", 占位符： “portlet-placeholder ui-corner-all”，删除：function(event, ui) { console.log(event, ui); } });

    $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all").find(".portlet-header").addClass("ui-widget-header ui-corner-all").prepend(
            "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");

    $(".portlet-toggle").on("click", function() {
        var icon = $(this);
        icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
        icon.closest(".portlet").find(".portlet-content").toggle();
    });

    $(".portlet").resizable();
});

试试这个代码..........................

https://jsfiddle.net/choisyong/xa7uhrd1/2/

于 2019-08-12T02:20:57.923 回答