Сделать сортируемый div с возможностью изменения размера с помощью jQuery UI

Question

Я использую jQuery UI Sortable 'portlets'.

Я хочу, чтобы добавить функцию изменения размера для него, как и в jQuery UI

Я попробовал мой Сортируемый в this Fiddle

Мой код:

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

Вы не можете иметь фиксированную ширину.column, а затем иметь возможность изменять размер элемента, чтобы быть шире, чем ширина столбца. Пусть ширина .column будет auto и переместите ширину до .portlet - see demo или ниже для внесения изменений.

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

Кроме того, как @SanketS уже ответил и @Rudy отметил, что вам нужно добавить $('.portlet').resizable(), чтобы элементы изменяемыми.

Answer 2

Добавить $(".portlet").resizable(); в коде Jquery. DEMO