Javascript 如何使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>

喂养
Lorem ipsum dolor sit amet，一位杰出的领导者
新闻
Lorem ipsum dolor sit amet，一位杰出的领导者
购物
Lorem ipsum dolor sit amet，一位杰出的领导者
链接

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

$（.wrap”）.sortable({
连接到：“.column”，
项目：'.portlet'，
占位符：“ui状态突出显示”，
大小：true，
距离：0.5，
真的吗
});
$（“.portlet”）.resize（函数（）{
$（“.portlet”）.css（“高度”、“自动”）；
});
$（“.portlet”）.resizeable（）.addClass（“ui小部件ui小部件内容ui帮助程序clearfix ui角点全部”）
.find（“.portlet头”）
.addClass（“ui小部件标题ui角点全部”）
.prepend（“”）
(完)
.find（“.portlet内容”）；
$（“.portlet头.ui图标”）。单击（函数（）{
$（this）.toggleClass（“ui图标厚度”）.toggleClass（“ui图标厚度”）；
$（this.parents（“.portlet:first”）.find（“.portlet内容”）.toggle（）；
});
$（“.column”）.disableSelection（）；

---

检查，我们从四列开始，但在拖放之后，我们有空列，我们不能在它们中拖放，而我想这样做。

这是工作小提琴。 问题是您在错误的元素上创建了可排序的小部件。 在.column元素上创建它将使其正常工作

相关问题：

---

我明白了，但是当我们调整项目大小时，我们会丢失列数，即使我们调整项目大小，我们也无法返回到四列。问题是列类没有固定的大小。移除具有固定大小的子元素时，没有任何东西可以告诉div保持充气状态。我正在将CSS添加到我的原始帖子中。

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

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