Reorder elements in Accordion by drag and drop

Hello, I was wondering if it would be possible to provide drag&drop capability to Accordion so that user can reorder the app order during runtime.
For example, the following code will provide an accordion with fixed order

import panel as pn
pn.extension()

test = pn.Accordion(
    ("app1", pn.pane.Markdown("APP#1")),
    ("app2", pn.pane.Markdown("APP#2")),
    ("app3", pn.pane.Markdown("APP#3")),
    ("app4", pn.pane.Markdown("APP#4")),
)

test.show()

It would be great if the user can drop and drop each app to a new position, and the new order can be captured and serialized as a json dict at a later time.

I would suggest adding it as a feature request on Github.

Thanks for the suggestion, I have submitted a feature request (Add interactivity for accordion · Issue #3815 · holoviz/panel · GitHub) as suggested.

2 Likes

This example should do it

import panel as pn
import param

pn.extension(sizing_mode="stretch_width")

layout = pn.layout.GridStack(ncols=1)
card1 = pn.layout.Card("Text", title="Card 1")
card2 = pn.layout.Card("Text", title="Card 2")

layout[0:2,:]=card1
layout[2:4,:]=card2

@pn.depends(layout.param.state)
def get_layout(state):
    return [item.title for item in layout[:]]

pn.Column(layout, get_layout).servable()

But there are some issues. See Gridstack stalls when I resize the window and Cards inside do not stretch_width on initial render. · Issue #3824 · holoviz/panel (github.com)

Thanks for the example.
I am having the same issue as I mentioned in the corresponding github issue (Add interactivity for accordion · Issue #3815 · holoviz/panel · GitHub): the layout is not updating its size after collapsing the card, which means we cannot use it as a replacement for draggable accordion (or sortable accordion from jquery-ui).
Is it possible to mimic draggable accordion with the current state of panel?