1
一切工作正常,但当我把一列放入另一列时,有一个空的列,我不能再放下任何东西。如何使空列上的jQuery可排序删除?
HTML
<div class="wrap">
<div class="column">
<div class="portlet">
<div class="portlet-header">Feeds</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">News</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Shopping</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Links</div>
<div class="portlet-content"><img src="https://s-media-cache-ak0.pinimg.com/736x/12/64/da/1264da4a3f18207dc22592102abae40d--frangipani-tattoo-plumeria-flowers.jpg"></div>
</div>
</div>
</div>
JS
$(".wrap").sortable({
connectWith: ".column",
items: '.portlet',
placeholder: 'ui-state-highlight',
forcePlaceholderSize: true,
distance: 0.5,
dropOnEmpty: true
});
$(".portlet").resize(function() {
$(".portlet").css("height", "auto");
});
$(".portlet").resizable().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();
检查jsFiddle,我们先从四列,但拖放后,我们有空列,我们不能在它们拖放,而我想。
我看到的,然而,当我们调整项目我们失去的列数http://jsfiddle.net/WFPaj/116 /,即使我们调整项目小 –
我看,我们不能回到四列。问题是你的专栏类没有固定的大小。 当您删除具有固定大小的子元素时,没有什么可告诉div保持充气。 http://jsfiddle.net/WFPaj/124/ 我将CSS添加到原始文章中。 – BlazerBrown