Reorder list of lists without affecting inner-list

Ionic Framework ionic-v3
#1

Context

Hello there

I have a list of form inputs. Some of the inputs contain an ion-item within the item. Below is an example:

<ion-list reorder="true" (ionItemReorder)="...">
    <ion-item>
        <ion-list radio-group>
            <ion-item>
                <ion-label>...</ion-label>
                <ion-radio value="..."></ion-radio>
            </ion-item>
            ... more radio options ...
        </ion-list>
    </ion-item>
    ... more form inputs ...
</ion-list>

Problem

The problem is that instead of reorder=“true” on the root list only affecting items on the first level, it affects all ion-item descendants - even if they are not in a list.

What I have tried:

  • I have tried applying reorder=“false” to child ion-lists, but this doesn’t work.
  • I have changed ion-item to div where possible, but this messes up the formatting for some items (like radios)
  • Using ion-item-group with reorder=“false”

Anyone have a way to force it to only allow sorting for the first level?

Thank you.

#2

If you don’t get any better answers, you could look into using dragula instead of Ionic’s D&D. I believe it works the way you are describing you want.

#3

Hi, do you find the solution ? i’m in the same case.

#4

I ended up making a custom component.

Left the thread open in case someone had a solution.