在DearPyGui框架中实现图片拖放功能遇到技术难题

问题根源 #

1. drag_callback需要按住鼠标左键拖动元素才会触发，而非单纯点击；
2. 未通过dpg.set_drag_payload()设置拖放载荷，导致目标元素的drop_callback无法识别有效拖放操作；
3. 虽然你已设置payload_type="image_payload"确保拖放双方类型匹配，但缺少载荷数据传递是核心阻碍。

修改后的完整代码 #

import dearpygui.dearpygui as dpg

def get_image(width, height, red, green, blue, alpha):
    """Generates simple image"""
    return [red, green, blue, alpha] * width * height

def drag_callback(sender, app_data):
    print(f"Starting drag from {sender}")
    # 设置拖放载荷，传递当前图片按钮的标识
    dpg.set_drag_payload("image_payload", sender)

def drop_callback(sender, app_data):
    # 获取拖放过来的载荷数据
    source_tag = dpg.get_drag_payload("image_payload")
    print(f"Dropped from {source_tag} to {sender}")

def create_image(image_data, width, height, image_tag, texture_tag):
    with dpg.texture_registry():
        texture_id = dpg.add_static_texture(width, height, image_data, tag=texture_tag)

    dpg.add_image_button(texture_id, tag=image_tag, payload_type="image_payload", 
                         drag_callback=drag_callback, drop_callback=drop_callback)

if __name__ == '__main__':
    dpg.create_context()

    print(f"DPG version {dpg.get_dearpygui_version()}")

    with dpg.window(label="Image Drag-and-Drop", tag="DragDropWindow", width=800, height=600, 
                    no_close=True, no_collapse=True):
        width = 100
        height = 100
        img1 = get_image(width, height, 1, 0, 1, 1)
        img2 = get_image(width, height, 0, 1, 0, 1)
        create_image(img1, width, height, "Image1", "ImageTexture1")
        create_image(img2, width, height, "Image2", "ImageTexture2")

    dpg.create_viewport(title="Main", width=800, height=600)
    dpg.setup_dearpygui()
    dpg.show_viewport()
    dpg.start_dearpygui()
    dpg.destroy_context()

关键修改说明 #

• 在drag_callback中添加dpg.set_drag_payload("image_payload", sender)：将当前拖动元素的tag作为有效载荷传递，让拖放操作具备可识别的数据；
• 在drop_callback中通过dpg.get_drag_payload("image_payload")获取拖动源信息，完成拖放逻辑的对接；
• 触发方式：按住鼠标左键在图片按钮上拖动，移动到另一个图片按钮区域后松开鼠标，即可触发两个回调函数。

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