from dash import Dash, html, dcc, html as html_components
from dash.dependencies import Input, Output

app = Dash(__name__)

# 初始数据
rows = [
    {"id": 1, "content": "行1"},
    {"id": 2, "content": "行2"},
    {"id": 3, "content": "行3"}
]

app.layout = html.Div([
    html.H1("拖拽行示例"),
    dcc.DragAndDropGrid(
        id='drag-and-drop-grid',
        columns=1,
        children=[
            html.Div(
                [html.P(f"{row['content']} (ID: {row['id']})") for row in rows]
            )
        ]
    )
])

@app.callback(
    Output('drag-and-drop-grid', 'children'),
    [Input('drag-and-drop-grid', 'dragged'),
     Input('drag-and-drop-grid', 'setProps')]
)
def update_grid(dragged, setProps):
    if dragged:
        for item in dragged:
            row_id = item['id']
            new_index = int(item['index'])
            # 假设我们有一个函数来更新行的顺序
            update_row_position(row_id, new_index)
            # 重新生成行组件
            new_children = generate_row_components(rows)
            return new_children
    return None

def update_row_position(row_id, new_index):
    # 这里应该是更新行顺序的逻辑
    # 例如，你可以在这里更新rows列表或数据库中的数据
    pass

def generate_row_components(rows):
    return [
        html.Div(
            [html.P(f"{row['content']} (ID: {row['id']})") for row in rows]
        )
    ]

if __name__ == '__main__':
    app.run_server(debug=True)