I am having issues getting back a return value into a callback on the server side from the clientside callback function from within a javascript event handler. I'm trying to implement a very simple drag and drop using Dragula with Dash (inspired by this post https://community.plotly.com/t/drag-and-drop-cards/42480/2), please see below. I am able to get text returned into my output div but only by using innerText in the clientside callback, and the serverside callback does not trigger on input of children, so what solution can I use to get the order of the items back to my database? Does anyone have a workaround here?

Thanks!

Note that the list I am reordering is dynamically generated so it is hard for me to show that as static html here, but it is a list of links within the element with id called 'drag-container'

The html:

html.Div([
          html.Div(id="sort-order", children=[]),
          dcc.Input(id="test-output", value="", type="text")
])

The callbacks:

app.clientside_callback(
    ClientsideFunction(namespace="clientside", function_name="make_draggable"),
    Output("drag_container", "data-drag"),
    Input("drag_container", "children"),
    Input({'type': 'nt_list_item', 'index': ALL}, 'data-info'),
    State("drag_container", "id")
)


@app.callback(
    Output('test-output', 'value'),
    Input('sort-order', 'children'),
)
def sort_update(sort_order):
    return sort_order

assets/scripts.js

if (!window.dash_clientside) {
    window.dash_clientside = {};
}
window.dash_clientside.clientside = {
    make_draggable: function (children, inputs_info, id) {

        setTimeout(function () {

            let drake = dragula({});
            let el = document.getElementById(id)
            let output_div = document.getElementById('sort-order')
            drake.containers.push(el);
            drake.on("drop", function (_el, target, source, sibling) {

                // a component has been dragged & dropped
                let order_ids = Array.from(target.children).map(function (item) {
                    return item.getAttribute('data-info')
                })
                window.console.log(order_ids)
                output_div.innerHTML = order_ids.toString()
            })
        }, 1)
        return window.dash_clientside.no_update
    }
}