Nested Sort-ables

[LeahPike]

trafficstars

I'm after some help, is it possible to have a nested sort-able drag and drop?

I have one list of groups, which is sort-able, each group contains a list of fields which is sort-able. You shouldn't be able to move a group into a field list, or a field into the group list.

<div dnd-sortable-container [sortableData]="module.groups" class="group card" *ngFor="let group of module.groups; let i = index">
    <div class="card-block" dnd-sortable [sortableIndex]="i">
        <div class="card-title">
            <h5>{{ group.name }}</h5>
        </div>
        <div>
            <div dnd-sortable-container [sortableData]="group.fields" *ngFor="let field of group.fields; let i = index">
                <div dnd-sortable [sortableIndex]="i">
                    <span class="text-capitalize">{{ field.name }} - {{ field.type }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

I tried to use drop zones with the sort-able tags but I get errors "Can't bind to 'dropZones' since it isn't a known property of 'div'."

Is it possible to get such a setup working?

Please tell us about your environment:

• Angular version: 2.0.0-rc.5
• Browser: Chrome Version 52.0.2743.116 m (64-bit)

[marcosbeto]

Did you find how to solve it?

[LeahPike]

I haven't, sorry :(

[Gillardo]

Any news on this?

[geoffles]

#20 - would like this too

[niravpatel9898]

Check this example out.

In this example (No.13) if you observe carefully, You have to set [dragEnable] as false whenever you want the inner sortable container's drag and drop to work.

[Trapulo]

ok, but this will not provide a real "inner + outer resorting" user experience...

[Trapulo]

It can be solved using dragEnabled + dropZones + (mousedown)="dragDetails = false; $event.stopPropagation();"

nested list sortables seems working using this kind of schema... but something more native we'll be great

[Anoxy]

any updates on this ? still can't get this working :/

edit.

I managed to get this working by setting dragEnable on parent elements when mouseenter nested sortable , then setting it back again when moseleaving elements.

[JustinElst]

@Anoxy could you provide a plnkr as an example?