Knockout-sortable nested items can't be dragged into childless element

Question

I'm using knockout-sortable and my goal is nestedSortable behaviour. I have a working light-weight fiddle example I've made, and everything is ok except one thing: I can't move children to element who doesnt have it initially.

Child elements prints there:

<div data-bind="if: children().length > 0">
    <ul data-bind="sortable: { template: 'tpl', data: $data.children }"></ul>            
</div>

Even if check removed there's still no room to place child elements. Is there somewhere good solution for nested sortable for knockout?

Answer 1

You just need to give it some height. I took out the if, put a class on the ul

<div>
  <ul class="sort-drop" data-bind="sortable: { template: 'tpl', data: $data.children }"></ul>
</div>

and styled it red so you can see it

.sort-drop:empty {
  background-color: red;
  min-height: 5px;
}

Updated fiddle.