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

Question

我正在使用显示here

的Jquery拖放功能

HTML CODE

<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 CODE

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

我做了一个小提琴here

这里一切运行正常，但唯一不寻常的是因为任何列表都是空的，它被删除或从DOM中删除，因为我们无法添加任何东西，我想这样做，我怎么能这样做，请说清楚。

提前致谢， ANKUR

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

我在你的小提琴手中测试了它并且工作正常