Support for nested sortable-group items.

[alexabreu]

I've run into a few issues when using ember-sortable with nested groups. My original approach assumed a child sortable-group onChange handler would be responsible for sorting child items. Unfortunately, it seems these change events bubble up to the handler for parent items. Once I realized that to be the case, I was able to work around the issue, by filtering out items accordingly by inspecting the draggedItem argument in the parent onChange callback. Would it be possible to scope change handlers to only worry about changes to direct sortable-item children? I believe this would make working with nested draggable lists a bit easier.

The second challenge I've run into is that the transitionY transform applied to items during drag seems to break down with nested sortable-groups. Despite explicitly setting spacing to 0 (though it seems this isn't required), a great deal of whitespace is inserted between all the draggable items in the tree (parent and child items). This makes for an unusable D&D experience, as it is difficult to drag an item past all the extra whitespace and still know where the item is going to be inserted relative to where it was previously.

Original Approach

<ol {{sortable-group onChange=this.handleParentItems}}>
    <li {{sortable-item model=parentItem}}>
        <ol {{sortable-group onChange=this.handleChildItems}}>
            <li {{sortable-item model=childItem}}/>
        </ol>
   </li>
</ol>

Screenshots

In this example, each category (i.e. Cherry, Apple, Peach) should be draggable to allow sorting of categories. In addition, each item within a category should also be draggable to allow sorting of those items (i.e. Cherry, Cherry With Fruit).

[ygongdev]

For the 1st scenario, I believe you can solve the problem by adding explicit groupName on each sortable-group

[dirkdirk]

Working with <div>s: