Make sortable div resizeable with jQuery UI

Question

I am using jQuery UI Sortable 'portlets'.

I want to add Resize function to it as in jQuery UI

I have tried my Sortable in this Fiddle

My Code:

$(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

You can't have a fixed width .column and then have the ability to resize an element to be wider than the column width. Let the .column width be auto and move the width to the .portlet - see demo or below for the change.

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

Also, as @SanketS already answered and @Rudy commented, you need to add $('.portlet').resizable() to make the elements resizable.

Answer 2

Add $( ".portlet" ).resizable(); in your jquery code. DEMO