Plotly Dash客户端回调事件处理器返回值无法触发服务端回调问题

服务端回调无法触发的核心原因是原生JS直接操作DOM修改内容的行为不会被Dash的状态管理系统感知。
Dash的组件属性更新基于React状态流，你在dragula的drop事件里直接通过output_div.innerHTML = order_ids.toString()修改DOM，属于脱离Dash体系的原生操作，既不会更新组件自身的属性值，也不会触发绑定在对应属性上的回调链路，所以服务端监听sort-order的children变更永远不会被触发。
另外你代码里还存在容器id不匹配的问题：HTML里容器id是drag-container（中划线连接），回调里写的是drag_container（下划线连接），会导致JS找不到目标拖拽容器。

优先使用Dash内置的属性更新API替代原生DOM操作，核心修改点如下：

• 统一容器id命名，把回调里的drag_container和HTML里的容器id保持一致，避免JS找不到目标拖拽容器。
• 修改前端JS的drop事件逻辑，删除原生innerHTML赋值的代码，改用Dash官方提供的set_props方法更新目标组件属性，同时新增实例销毁逻辑避免重复绑定事件，修改后的完整前端脚本如下：

if (!window.dash_clientside) {
    window.dash_clientside = {};
}
// 全局存储dragula实例，避免重复绑定事件
let drake = null;
window.dash_clientside.clientside = {
    make_draggable: function (children, inputs_info, id) {
        setTimeout(function () {
            let el = document.getElementById(id)
            // 找不到容器直接返回
            if (!el) return window.dash_clientside.no_update;
            // 重复初始化前先销毁旧实例，防止一次拖拽触发多次回调
            if (drake) {
                drake.destroy();
            }
            drake = dragula({});
            drake.containers.push(el);
            drake.on("drop", function (_el, target) {
                let order_ids = Array.from(target.children).map(function (item) {
                    return item.getAttribute('data-info')
                })
                console.log(order_ids)
                // 通过Dash官方API更新组件属性，变更会被整条回调链路正常捕获
                window.dash_clientside.set_props("sort-order", {
                    children: order_ids.toString()
                })
            })
        }, 1)
        return window.dash_clientside.no_update
    }
}

• 不需要修改现有服务端回调逻辑，set_props更新的children值会正常触发服务端回调，你可以直接在sort_update函数里拿到排序后的id列表，追加数据库写入逻辑即可。

如果你的Dash版本低于2.0，没有内置set_props方法，可以给客户端回调新增一个指向sort-order.children的Output，通过异步Promise的方式在拖拽触发时返回排序结果，不过实现逻辑更繁琐，优先升级Dash版本使用上述方案即可。

内容的提问来源于stack exchange，提问作者mark377