jquery ui - 似乎把我的draggables拖到一个空的可排序的li上

Question

我有一个名为#gallery的列表，其中我已经定义了几个li盒。

e.g。

 <ul id="gallery">
   <li style="display: list-item; ui-draggable">A</li>
 </li>

和一个将它们放入...的框

<div id="conditions-box" class="ui-droppable">      
    <ul class="gallery ui-helper-reset ui-sortable"></ul>    
</div>

使用以下js

$('#conditions-box > ul').sortable();
$("#gallery > li").draggable({
   connectToSortable: '#conditions-box > ul',
   helper: 'clone'
});

当我的条件框列表为空时，你现在可以看到我可以拖动这些框但是只有当我将现有的li放入条件框时它们才会“粘住”它实际上是否有效。但是我不想要这样做。如果你想要一个游戏，你可以在下面看到。有什么想法吗？

参考 - http://jsfiddle.net/wmitchell/zCDE7/2/

Answer 1

我认为您需要为height排序设置conditions-box。您可以使用css：

#conditions-box {
  height: 40px;
}

Answer 2

尝试将dropOnEmpty选项添加到sortable中，即使默认值为true，它似乎也不起作用，因为当sortable 不为空时它可以正常工作。