如何在Tkinter中实现跨Frame的节点拖拽并自动调整层级结构？

看起来你已经搭建好了基础的层级展示和拖拽框架，但在跨Frame拖拽的坐标判断、层级自动调整这两块还有点小问题。我帮你梳理下问题所在，然后给出修改后的完整代码，应该能完美实现你想要的功能~

先说说现有代码的核心问题 #

1. 坐标判断逻辑错误：你用node_label.winfo_y()来判断目标层级，但这个坐标是相对于节点原来的父Frame，不是滚动容器的全局坐标，根本没法正确识别拖拽到了哪个层级。
2. 拖拽与布局冲突：直接移动原Label的place位置，会和你用的pack布局规则冲突，导致拖拽后组件位置完全混乱。
3. 层级调整逻辑漏洞：原adjust_levels里的迭代删除操作会触发字典遍历错误，而且判断层级是否为空的逻辑不够严谨，容易漏掉空层级的处理。

修改后的完整代码 #

import tkinter as tk
from tkinter import ttk, filedialog
import os
import configparser  # 补全原代码遗漏的导入

class DragDrop(tk.Label):
    def __init__(self, parent, text, app, **kwargs):
        super().__init__(parent, text=text, **kwargs)
        self.parent = parent
        self.app = app
        self.text = text
        self.bind("<Button-1>", self.on_click)
        self.bind("<B1-Motion>", self.on_drag)
        self.bind("<ButtonRelease-1>", self.on_release)
        self._drag_data = {"x": 0, "y": 0, "item": None, "drag_window": None}

    def on_click(self, event):
        # 记录点击位置和当前节点
        self._drag_data["item"] = self
        self._drag_data["x"] = event.x
        self._drag_data["y"] = event.y
        # 创建临时拖拽影子窗口
        self._drag_data["drag_window"] = tk.Toplevel(self.app.root)
        self._drag_data["drag_window"].overrideredirect(True)
        # 复制原节点样式
        drag_label = tk.Label(
            self._drag_data["drag_window"], 
            text=self.text, 
            bg=self.cget("bg"), 
            fg=self.cget("fg"),
            font=self.cget("font"),
            bd=self.cget("bd"),
            relief=self.cget("relief"),
            padx=self.cget("padx"),
            pady=self.cget("pady")
        )
        drag_label.pack()
        # 初始定位到鼠标位置
        self.update_drag_window_position(event.x_root, event.y_root)

    def update_drag_window_position(self, root_x, root_y):
        # 让拖拽窗口跟随鼠标中心
        if self._drag_data["drag_window"]:
            w = self._drag_data["drag_window"].winfo_width()
            h = self._drag_data["drag_window"].winfo_height()
            self._drag_data["drag_window"].geometry(f"+{root_x - w//2}+{root_y - h//2}")

    def on_drag(self, event):
        # 拖拽时更新窗口位置
        self.update_drag_window_position(event.x_root, event.y_root)

    def on_release(self, event):
        # 销毁拖拽窗口
        if self._drag_data["drag_window"]:
            self._drag_data["drag_window"].destroy()
            self._drag_data["drag_window"] = None
        # 通知应用层处理位置更新
        self.app.update_node_position(self, event.x_root, event.y_root)
        # 重置拖拽数据
        self._drag_data = {"x": 0, "y": 0, "item": None, "drag_window": None}

class Viewer:
    def __init__(self, root):
        self.root = root
        self.level_dict = {'JK': 0, 'pun': 1, 'utp': 1, 'pun utp': 0, 'utk': 1, 'gjr': 2, 'wbk': 3, 'nest': 4, 'mahm': 5, 'ksl': 6, 'krtk': 5}
        self.sections = {'JK': {'DEPS': None, 'TYPES': None, 'RATING': '0'}, 'pun': {'DEPS': 'JK', 'TYPES': None, 'RATING': '0'}, 'utp': {'DEPS': 'JK', 'TYPES': None, 'RATING': '0'}, 'utk': {'DEPS': 'pun utp', 'TYPES': None, 'RATING': '0'}, 'gjr': {'DEPS': 'utk', 'TYPES': None, 'RATING': '0'}, 'wbk': {'DEPS': 'gjr', 'TYPES': None, 'RATING': '0'}, 'nest': {'DEPS': 'wbk', 'TYPES': None, 'RATING': '0'}, 'mahm': {'DEPS': 'nest', 'TYPES': None, 'RATING': '0'}, 'ksl': {'DEPS': 'mahm', 'TYPES': None, 'RATING': '0'}, 'krtk': {'DEPS': 'nest', 'TYPES': None, 'RATING': '0'}}

        self.canvas = tk.Canvas(root, bg="white")
        self.h_scrollbar = tk.Scrollbar(root, orient=tk.HORIZONTAL, command=self.canvas.xview)
        self.v_scrollbar = tk.Scrollbar(root, orient=tk.VERTICAL, command=self.canvas.yview)
        self.scrollable_frame = tk.Frame(self.canvas)

        self.scrollable_frame.bind(
            "<Configure>",
            lambda e: self.canvas.configure(scrollregion=self.canvas.bbox("all"))
        )

        self.canvas.create_window((0, 0), window=self.scrollable_frame, anchor="nw")
        self.canvas.configure(xscrollcommand=self.h_scrollbar.set, yscrollcommand=self.v_scrollbar.set)

        self.h_scrollbar.pack(side=tk.BOTTOM, fill=tk.X)
        self.v_scrollbar.pack(side=tk.RIGHT, fill=tk.Y)
        self.canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)

        self.event_var = tk.StringVar(value="All")
        self.create_widgets()
        self.draw_graph()

    def create_widgets(self):
        control_frame = tk.Frame(self.root)
        control_frame.pack(side=tk.TOP, fill=tk.X)

        event_label = tk.Label(control_frame, text="Select Types:")
        event_label.pack(side=tk.LEFT, padx=5, pady=5)

        event_options = ["All", "zones", "states"]
        event_menu = ttk.Combobox(control_frame, textvariable=self.event_var, values=event_options)
        event_menu.pack(side=tk.LEFT, padx=5, pady=5)
        event_menu.bind("<<ComboboxSelected>>", self.on_event_change)

        browse_button = tk.Button(control_frame, text="Browse data_file", command=self.browse_file)
        browse_button.pack(side=tk.LEFT, padx=5, pady=5)

        save_button = tk.Button(control_frame, text="Save", command=self.save_data_file_file)
        save_button.pack(side=tk.LEFT, padx=5, pady=5)

    def browse_file(self):
        data_file_file = filedialog.askopenfilename(filetypes=[("data_file files", "*.data_file")])
        if data_file_file:
            self.data_file_file = data_file_file
            # self.main_func()  # 保留原业务逻辑占位
            self.draw_graph()

    def save_data_file_file(self):
        save_file = filedialog.asksaveasfilename(defaultextension=".data_file", filetypes=[("data_file files", "*.data_file")])
        if save_file:
            config = configparser.ConfigParser()
            for section, attributes in self.sections.items():
                config[section] = attributes
                config[section]['LEVEL'] = str(self.level_dict[section])
            with open(save_file, 'w') as configfile:
                config.write(configfile)

    def on_event_change(self, event):
        self.event_filter = self.event_var.get() if self.event_var.get() != "All" else None
        # self.main_func()  # 保留原业务逻辑占位
        self.draw_graph()

    def draw_graph(self):
        # 清空所有现有组件
        for widget in self.scrollable_frame.winfo_children():
            widget.destroy()

        self.level_frames = {}
        # 按层级分组节点
        levels = {}
        for section, level in self.level_dict.items():
            if level not in levels:
                levels[level] = []
            levels[level].append(section)

        # 按层级升序渲染
        sorted_levels = sorted(levels.keys())
        colors = ["lightblue", "lightgreen", "lightyellow", "lightpink", "lightgray"]
        for level in sorted_levels:
            nodes = levels[level]
            level_frame = tk.Frame(self.scrollable_frame, bg=colors[level % len(colors)], bd=2, relief=tk.SOLID)
            level_frame.pack(fill=tk.X, padx=10, pady=5)
            self.level_frames[level] = level_frame

            # 层级标题
            level_label = tk.Label(level_frame, text=f"Level {level}", bg=colors[level % len(colors)], 
                                  font=("Arial", 12, "bold"), anchor="w")
            level_label.pack(side=tk.TOP, fill=tk.X)

            # 绘制该层级节点
            for node in nodes:
                self.draw_node(level_frame, node)

    def draw_node(self, parent, node):
        level = self.level_dict.get(node, 0)
        label = f'{node}({level})'
        if node in self.sections:
            color = 'lightblue' if self.sections[node]['RATING'] == '1' else 'skyblue'
            fg_color = 'darkblue'

            node_label = DragDrop(parent, text=label, app=self, bg=color, fg=fg_color, 
                                 font=("Arial", 10), bd=1, relief=tk.SOLID, padx=5, pady=5)
            node_label.pack(side=tk.LEFT, padx=5, pady=5)

    def update_node_position(self, node_label, root_x, root_y):
        # 转换屏幕坐标为滚动容器内的相对坐标
        sf_x = self.scrollable_frame.winfo_pointerx() - self.scrollable_frame.winfo_rootx()
        sf_y = self.scrollable_frame.winfo_pointery() - self.scrollable_frame.winfo_rooty()
        
        # 查找鼠标落点对应的层级Frame
        target_widget = self.scrollable_frame.winfo_containing(
            sf_x + self.scrollable_frame.winfo_rootx(), 
            sf_y + self.scrollable_frame.winfo_rooty()
        )
        
        target_level = None
        while target_widget and target_widget != self.scrollable_frame:
            if target_widget in self.level_frames.values():
                for level, frame in self.level_frames.items():
                    if frame == target_widget:
                        target_level = level
                        break
                break
            target_widget = target_widget.master

        if target_level is None:
            return  # 未拖到有效层级，不处理

        # 获取节点名称并更新层级
        node_text = node_label.cget("text")
        node_name = node_text.split('(')[0]
        old_level = self.level_dict[node_name]

        if old_level != target_level:
            self.level_dict[node_name] = target_level
            self.adjust_levels()
            self.draw_graph()

    def adjust_levels(self):
        # 收集所有有节点的层级并排序
        occupied_levels = sorted(list({level for level in self.level_dict.values()}))
        # 筛选出有实际节点的层级
        valid_levels = [l for l in occupied_levels if any(self.level_dict[n] == l for n in self.level_dict)]
        # 重新分配连续层级编号
        level_mapping = {old: new for new, old in enumerate(valid_levels)}
        # 更新所有节点的层级值
        for node in self.level_dict:
            self.level_dict[node] = level_mapping[self.level_dict[node]]

if __name__ == '__main__':
    root = tk.Tk()
    root.title("Order Viewer")
    app = Viewer(root)
    root.geometry("800x600")
    root.mainloop()

关键修改点说明 #

1. 拖拽体验优化：

   • 拖拽时创建临时“影子窗口”跟随鼠标，原节点保持原位，避免和pack布局冲突，视觉反馈更清晰。
   • 用屏幕坐标转换+组件查找的方式，准确识别拖拽落点对应的层级。

2. 层级判断修复：

   • 用winfo_containing直接获取鼠标位置的组件，再向上遍历找到所属层级Frame，比手动计算坐标范围更可靠。

3. 层级调整逻辑重构：

   • 先收集所有有节点的层级，再重新分配连续编号，彻底解决空层级残留问题，保证层级结构始终连续合理。
   • 避免了原代码中迭代删除字典键的错误，逻辑更稳定。

4. 细节补全：

   • 补全了原代码遗漏的configparser导入，确保保存功能正常。
   • 保留了原业务逻辑的占位，方便你后续扩展。

备注：内容来源于stack exchange，提问作者A.G.Progm.Enthusiast