You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.5 KiB
56 lines
1.5 KiB
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)
|