1

我正在使用 jQuery UI 可排序的“portlets”。

我想像在jQuery UI中一样向它添加 Resize 函数

我已经在这个 Fiddle中尝试过我的 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();
});
4

2 回答 2

3

你不能有一个固定的宽度 .column，然后有能力调整一个元素的大小，使其比列宽更宽。让.column宽度成为auto并将宽度移动到.portlet-请参阅演示或下面的更改。

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

此外，正如@SanketS 已经回答和@Rudy 评论的那样，您需要添加$('.portlet').resizable()以使元素可调整大小。

于 2013-11-01T09:30:20.163 回答
3

添加$( ".portlet" ).resizable();你的jQuery代码。 演示

于 2013-11-01T08:31:29.983 回答