Question

我正在尝试实现排序并调整网格中的几个div，例如布局。

这是一个示例fiddle

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

调整大小不适合小提琴。这是调整大小后我需要实现的正确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％的元素的高度。它留下了一些白色空间。是否有任何方法可以删除它并调出底部元素？

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

example

Answer 2

$（function（）{ $（“。column”）。sortable（{ connectWith：“。column”，光标：“移动”，句柄：“。portlet-header”，取消：“ .portlet-toggle”，占位符：“ portlet-placeholder ui-corner-all”， remove：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();
});

尝试此代码........................................... < / p>

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

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

2 个答案: