Dash中html.Button的draggable='true'属性使用问题及示例咨询

问题 #

我想给Dash的html.Button设置draggable='true'属性实现按钮拖拽移动的效果，参考官方文档知道这个属性控制按钮是否可拖拽，但按以下代码设置后，长按按钮并没有拖拽移动的效果，想了解这个属性的工作原理，以及能实现拖拽移动的示例代码。

代码示例：

from dash import Dash, dash_table, dcc, html, Input, Output, callback
import pandas as pd

df = pd.read_csv('accounts.csv')

app = Dash(__name__)

app.layout = html.Div([
    html.Br(),
    dash_table.DataTable(
        id='datatable-row-ids',
        columns=[
            {'name': i, 'id': i, 'deletable': True} for i in df.columns
            if i != 'id'
        ],
        data=df.to_dict('records'),
        editable=True,
        filter_action="native",
        sort_action="native",
        sort_mode='multi',
        row_selectable='multi',
        row_deletable=True,
        selected_rows=[],
        page_action='native',
        page_current= 0,
        page_size= 10,
    ),
    html.Div(id='datatable-row-ids-container'),
    html.Button('Hello', draggable='true')
])


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

解答 #

draggable属性的工作原理 #

• 原生HTML的draggable属性仅用于标记元素是否允许被拖拽，它不会自动实现拖拽后移动位置的逻辑。
• Dash的html.Button是对原生HTML按钮的封装，所以只设置draggable='true'，只会让按钮可以被拖拽（比如拖拽时会显示默认的拖拽光标），但不会自动改变按钮在页面上的位置，必须配合JavaScript的拖拽事件（dragstart、dragover、drop）来处理位置更新。

可拖拽移动按钮的示例代码 #

下面是实现按钮拖拽移动的完整示例，通过客户端JavaScript处理拖拽事件，更新按钮的定位：

from dash import Dash, dash_table, dcc, html, Input, Output, callback
import pandas as pd

df = pd.read_csv('accounts.csv')

app = Dash(__name__)

app.layout = html.Div([
    html.Br(),
    dash_table.DataTable(
        id='datatable-row-ids',
        columns=[
            {'name': i, 'id': i, 'deletable': True} for i in df.columns
            if i != 'id'
        ],
        data=df.to_dict('records'),
        editable=True,
        filter_action="native",
        sort_action="native",
        sort_mode='multi',
        row_selectable='multi',
        row_deletable=True,
        selected_rows=[],
        page_action='native',
        page_current= 0,
        page_size= 10,
    ),
    html.Div(id='datatable-row-ids-container'),
    # 设置按钮为绝对定位，方便拖拽时修改位置
    html.Button('可拖拽按钮', 
                id='draggable-btn',
                draggable='true',
                style={'position': 'absolute', 'top': '20px', 'left': '20px'}),
    # 嵌入处理拖拽的JavaScript
    html.Script("""
        const btn = document.getElementById('draggable-btn');
        let offsetX, offsetY;

        // 拖拽开始时记录鼠标与按钮的偏移量
        btn.addEventListener('dragstart', (e) => {
            offsetX = e.clientX - btn.getBoundingClientRect().left;
            offsetY = e.clientY - btn.getBoundingClientRect().top;
            // 设置拖拽数据（必须设置，否则部分浏览器不触发拖拽）
            e.dataTransfer.setData('text/plain', '');
        });

        // 拖拽过程中允许放置
        document.addEventListener('dragover', (e) => {
            e.preventDefault();
        });

        // 放置时更新按钮位置
        document.addEventListener('drop', (e) => {
            e.preventDefault();
            btn.style.left = (e.clientX - offsetX) + 'px';
            btn.style.top = (e.clientY - offsetY) + 'px';
        });
    """)
])


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

代码说明 #

1. 给按钮设置position: absolute，这样可以通过修改left和top属性来改变位置。
2. 通过dragstart事件记录鼠标在按钮内的偏移量，避免拖拽时按钮跳转到鼠标位置。
3. dragover事件中调用e.preventDefault()，允许页面接收放置操作。
4. drop事件中根据鼠标位置和偏移量，更新按钮的left和top样式，实现拖拽移动。

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