在 Jquery 中的列表中删除没有元素的列表

Question

我正在使用 here 显示的 Jquery 拖放功能

HTML 代码

<ul id="sortable1" class="connectedSortable">
   <li class="ui-state-default">Item 1</li>
   <li class="ui-state-default">Item 2</li>
   <li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
   <li class="ui-state-highlight">Item 1</li>
   <li class="ui-state-highlight">Item 2</li>
   <li class="ui-state-highlight">Item 3</li>
</ul>

JAVASCRIPT 代码

$(function() {
   $( "#sortable1, #sortable2" ).sortable({
     connectWith: ".connectedSortable"
   }).disableSelection();
});

我做了一个小提琴here

这里一切都运行良好，但唯一不寻常的是，当任何列表变为空时，它会从 DOM 中删除或删除，因为我们无法将任何内容添加回其中，我想这样做，我该怎么做，请说明一下。

提前致谢， 安库尔

Answer 1

问题是因为清空的ul 没有height 或width 来捕获拖动事件。设置以下 CSS 即可：

.connectedSortable {
    min-height: 50px;
    min-width: 120px;
}

Example fiddle

Answer 2

CSS

#sortable1, #sortable2 {
    list-style-type: none;
    margin: 0;
    padding: 0 0 2.5em;
    float: left;
    margin-right: 10px;
    width:120px; // Add width HERE
}

JAVASCRIPT

$(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: "ul" // Change that
    }).disableSelection();
  });

我在你的提琴手中测试过，效果很好