如何使空列上的jQuery可排序刪除？

一切工作正常，但當我把一列放入另一列時，有一個空的列，我不能再放下任何東西。如何使空列上的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>

$(".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，我們先從四列，但拖放後，我們有空列，我們不能在它們拖放，而我想。

來源

2017-09-01 rob.m

這是工作小提琴。問題是您正在創建可排序的小部件在錯誤的元素上。在.column元素上創建它會使它正常工作。

http://jsfiddle.net/WFPaj/124/

$(function() { 
    $(".column").sortable({ 
     connectWith: ".column", 
     items: '.portlet', 
     placeholder: 'ui-state-highlight', 
     forcePlaceholderSize: true, 
     distance: 0.1, 
     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(); 
})

CSS：

.column { 
    float: left; 
    padding-bottom: 100px; 
    background: #eee; 
    margin: 10px; 
    min-width: 190px; 
}

來源

2017-09-01 17:15:48 BlazerBrown

我看到的，然而，當我們調整項目我們失去的列數http://jsfiddle.net/WFPaj/116 /，即使我們調整項目小 –

我看，我們不能回到四列。問題是你的專欄類沒有固定的大小。當您刪除具有固定大小的子元素時，沒有什麼可告訴div保持充氣。 http://jsfiddle.net/WFPaj/124/ 我將CSS添加到原始文章中。 – BlazerBrown

如何使空列上的jQuery可排序刪除？

回答

相關問題