Question

我正在使用jQuery UI Sortable'portlets'。

中添加Resize功能

中尝试了我的Sortable

我的代码：

$(function() {
    $(".column").sortable({
    connectWith: ".column"
    });
    $(".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'></span>")
    .end()
    .find(".portlet-content");

    $(".portlet-header .ui-icon").click(function() {
       $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
       $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });
    $(".column").disableSelection();
});

Answer 1

在jquery代码中添加$( ".portlet" ).resizable();。 DEMO

Answer 2

您不能拥有固定宽度 .column，然后可以将元素的大小调整为宽于列宽。设.column宽度为auto，并将宽度移至.portlet - see demo或更低的位置以进行更改。

.column {
    float: left;
    padding-bottom: 100px;
}
.portlet {
    width: 170px;
    margin: 0 1em 1em 0;
}

此外，由于@SanketS已经回答并且@Rudy发表了评论，您需要添加$('.portlet').resizable()以使元素可以调整大小。

使用jQuery UI调整可排序div的大小

2 个答案: