Search code examples
javascriptknockout.jsknockout-3.0knockout-sortable

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

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?

Solution

  • 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.