一起实现可排序和可调整大小的 Jquery UI答案

【问题标题】：Implement Jquery UI sortable and resizable together一起实现可排序和可调整大小的 Jquery UI
【发布时间】：2012-07-27 11:40:41
【问题描述】：

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

这是一个例子fiddle

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

调整大小不适用于小提琴。这是我在调整大小后需要实现的正确result（假设 max-width resizable 是外部 div 的宽度）。但是在我的代码中，如果我尝试调整大小，元素会重叠，如果我将其放在右侧，则元素会从外部容器 div 溢出。（在result中）它没有发生，尝试将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>

【问题讨论】：

resizable 在您的 JSfiddle 中不起作用
我操纵它来显示调整大小的句柄here
@AbstractChaos 似乎现在在这里调整大小工作得很好......但在我的代码中却没有。我补充说：我正在使用引导流体布局。所以 div 的大小使用 span 类。
你有相应的 css，特别是你的 jquery ui 主题
在添加 css 时再次工作，所以我会说您缺少 css 请参阅here

标签： jquery html css jquery-ui-sortable jquery-ui-resizable

【解决方案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

【讨论】：

【解决方案2】：

$(函数() { $(".column").sortable({ 连接：“.column”，光标：“移动”，句柄：“.portlet-header”，取消：“.portlet-toggle”， placeholder : "portlet-placeholder ui-corner-all", 删除：函数（事件，用户界面）{ 控制台.log（事件，用户界面）； } });

    $(".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/

【讨论】：