Dash Mantine : Draggable AccordionItems

Dash Python
1

Is there a way to make dash mantine Accordion Components draggable.
@snehilvj I tried using ‘dragula’ but without success

import dash_mantine_components as dmc
from dash import Dash
from dash import html, ClientsideFunction, Output, Input


app = Dash(__name__)

app.config.external_stylesheets = ["https://epsi95.github.io/dash-draggable-css-scipt/dragula.css"]
app.config.external_scripts = ["https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js",
                               "https://epsi95.github.io/dash-draggable-css-scipt/script.js"]


widget = dmc.AccordionMultiple(
    children=[
        dmc.AccordionItem(
            [
                dmc.AccordionControl("Customization"),
                dmc.AccordionPanel(
                    "Colors, fonts, shadows and many other parts are customizable to fit your design needs"
                ),
            ],
            value="customization",
        ),
        dmc.AccordionItem(
            [
                dmc.AccordionControl("Flexibility"),
                dmc.AccordionPanel(
                    "Configure temp appearance and behavior with vast amount of settings or overwrite any part of "
                    "component styles "
                ),
            ],
            value="flexibility",
        ),
        dmc.AccordionItem(
            [
                dmc.AccordionControl("No annoying focus ring"),
                dmc.AccordionPanel(
                    "With new :focus-visible pseudo-class focus ring appears only when user navigates with keyboard"
                ),
            ],
            value="focus",
        ),
    ],

    id='drag-container',
    style={'display': 'flex', 'flex-direction': 'column'}
)

app.clientside_callback(
    ClientsideFunction(namespace="clientside", function_name="make_draggable"),
    Output("drag-container", "data-drag"),
    Input("drag-container", "id")
)


app.layout = widget

if __name__ == "__main__":
    app.run_server(debug=False)


'''
// Add to assets folder in *.js file
window.dash_clientside = Object.assign({}, window.dash_clientside, {
    clientside: {
        make_draggable: function (id, n_clicks) {
            // convert id to string if dict
            if (!(typeof id === 'string' || id instanceof String)) {
                id = JSON.stringify(id, Object.keys(id).sort());
            };

            setTimeout(function () {
                var el = document.getElementById(id)
                var drake = dragula([el]);

                drake.on("drop", function (_el, target, source, sibling) {
                    // a component has been dragged & dropped
                    // get the order of the ids from the DOM
                    var order_ids = Array.from(target.children).map(function (child) {
                        return child.id;
                    });

                    const drop_complete = new CustomEvent('dropcomplete', {
                        bubbles: true,
                        detail: {
                            name: "Additional event infos",
                            children: order_ids
                        }
                    });

                    target.dispatchEvent(drop_complete)

                })

            }, 1)
            return window.dash_clientside.no_update
        }
    }
});
'''
1 Like