combining mdb-sortable and mdb-accordion


Topic: combining mdb-sortable and mdb-accordion

kaijonas2021 asked a year ago

Expected behavior

sortable accordion

Actual behavior

I try to create a sortable accordion, but either...

...the newindex in onDrop method is incorrect (-1):

<mdb-accordion [multiple]="false" mdbSortableList (drop)="onDrop($event)">

    <mdb-accordion-item mdbSortable>...</mdb-accordion-item>

</mdb-accordion>

...or if i wrap the sortable content in a div container, so the indices are correct (sortable works) but the accordion settings do not work (e.g. [multiple]="false"). (probably because mdb-accordion-item is a grand-child of mdb-accordion now)

<mdb-accordion [multiple]="false">

    <div mdbSortableList (drop)="onDrop($event)">

        <mdb-accordion-item mdbSortable>...</mdb-accordion-item>

    <div>

</mdb-accordion>

It would be great if someone can help me:)


Arkadiusz Idzikowski staff commented a year ago

@kaijonas2021 the onDrop method should not be needed here if you don't generate items list with *ngFor.

Which version of the Sortable plugin do you use?


kaijonas2021 commented a year ago

Hi @Arkadiusz Idzikowski, thanks for your reply. You are right, i generate item list with *ngFor, but at the moment I use the onDrop method to collapse the accordion items by myself, but this isn't a nice solution. I have the latest (sortable) version 10.1.1.


kaijonas2021 commented a year ago

What is the recommended way to create a sortable accordion? Snipped 1, snipped 2 or something else? Or am I the first asking for this?


I used the following code in the test and it should work correctly if you use latest version of MDB Sortable plugin:

<mdb-accordion [multiple]="true" mdbSortableList>
  <mdb-accordion-item mdbSortable>
    <mdb-accordion-item-head>Collapsible Group Item #1</mdb-accordion-item-head>
    <mdb-accordion-item-body>
      ...
    </mdb-accordion-item-body>
  </mdb-accordion-item>

  <mdb-accordion-item mdbSortable>
    <mdb-accordion-item-head>Collapsible Group Item #2</mdb-accordion-item-head>
    <mdb-accordion-item-body>
         ...
    </mdb-accordion-item-body>
  </mdb-accordion-item>

  <mdb-accordion-item mdbSortable>
    <mdb-accordion-item-head>Collapsible Group Item #3</mdb-accordion-item-head>
    <mdb-accordion-item-body>
        ...
    </mdb-accordion-item-body>
  </mdb-accordion-item>
</mdb-accordion>

kaijonas2021 commented a year ago

The sortable itself is working, but if you add the onDrop method you will see, that 'event.newIndex' is incorrect (always -1 after sorting).

<mdb-accordion [multiple]="true" mdbSortableList (drop)="onDrop($event)">

onDrop(event: any) {
    let {oldIndex, newIndex} = event;        
    console.log("oldIndex: "+oldIndex);
    console.log("newIndex: "+newIndex);
    return
}

kaijonas2021 commented a year ago

I forgot to say that I need the onDrop method to assign the item data to the corresponding position (index)


Arkadiusz Idzikowski staff commented a year ago

We will take a closer look at that to try to find the cause of this problem. Unfortunately, we will probably need to make some changes on our end to make it work and there is no easy workaround for now.


kaijonas2021 commented a year ago

Ok, thanks. I look forward to an update.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 10.1.1
  • Device: Notebook
  • Browser: FireFox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No