CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortablejquery-ui-resizable
Pravin Kumar
Pravin Kumar

Reputation: 693

Make sortable div resizeable with jQuery UI

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();
});

Upvotes: 1

Views: 4115

Answers (2)

SanketS
SanketS

Reputation: 973

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

Upvotes: 3

andyb
andyb

Reputation: 43823

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.

Upvotes: 3

Related Questions