使用jQuery UI調整可調整大小的div

我正在使用jQuery UI Sortable'portlets'。使用jQuery UI調整可調整大小的div

我想調整的功能添加到它在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(); 
});

來源

2013-11-01 Pravin Kumar

我已將可調整大小添加到它。這是你想要的嗎？ http://jsfiddle.net/csicky/7DM3Q/8/ – Rudy

是的。但是，當重新調整2個div取得覆蓋...可以避免覆蓋。 –

不能具有固定寬度.column然後還要調整元件爲比列寬度寬的能力。讓.column寬度爲auto並將寬度移動到.portlet - see demo或更低的更改。

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

此外，作爲@SanketS已經回答@Rudy評論，你需要添加$('.portlet').resizable()使元素調整大小。

來源

2013-11-01 09:30:20 andyb

在jQuery代碼添加$(".portlet").resizable();。 DEMO

來源

2013-11-01 08:31:29 SanketS

是的..但是，雖然調整大小的2個div得到覆蓋.. –

@Pravin庫馬爾請參閱我的答案，我已經修改的DEMO。我改變了.column和.portlet css類。 – SanketS

謝謝Sanket S –

使用jQuery UI調整可調整大小的div

回答

相關問題