combining mdb-sortable and mdb-accordion


Topic: combining mdb-sortable and mdb-accordion

kaijonas2021 asked 4 years 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 4 years 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 4 years 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 4 years 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?


Arkadiusz Idzikowski staff answered 4 years ago

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 4 years 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 4 years 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 4 years 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 4 years ago

Ok, thanks. I look forward to an update.


doweb pro premium priority commented 2 years ago

Hello friends, I'm having an issue with implementing sortable in react, and I'm concerned this was never solved. Is there some way of finding the order of the accordion after it has been sorted by the user?


Arkadiusz Idzikowski staff commented 2 years ago

The problem mentioned here occurs in the Angular version of the sortable component. If you have any problems with React implementation, please consider creating a new thread in React section.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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