Tengo problemas para recuperar un valor de retorno en una devolución de llamada en el lado del servidor desde la función de devolución de llamada del lado del cliente desde un controlador de eventos de JavaScript. Estoy tratando de implementar un arrastrar y soltar muy simple usando Dragula con Dash (inspirado en esta publicación https://community.plotly.com/t/drag-and-drop-cards/42480/2 ), vea a continuación. Puedo obtener texto devuelto en mi div de salida, pero solo mediante el uso de texto interno en la devolución de llamada del lado del cliente, y la devolución de llamada del lado del servidor no se activa en la entrada de los niños, entonces, ¿qué solución puedo usar para devolver el orden de los elementos a mi base de datos? ? ¿Alguien tiene una solución aquí?

¡Gracias!

Tenga en cuenta que la lista que estoy reordenando se genera dinámicamente, por lo que es difícil para mí mostrarla como html estático aquí, pero es una lista de enlaces dentro del elemento con una identificación llamada 'drag-container'

el html:

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

Las devoluciones de llamada:

 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

activos/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 } }