Topic: combining mdb-sortable and mdb-accordion
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:)
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 free commented 3 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 free commented 3 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 3 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 free commented 3 years ago
Ok, thanks. I look forward to an update.
doweb priority commented 1 year 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 1 year 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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
Arkadiusz Idzikowski staff commented 3 years ago
@kaijonas2021 the
onDropmethod should not be needed here if you don't generate items list with*ngFor.Which version of the Sortable plugin do you use?
kaijonas2021 free commented 3 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 free commented 3 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?