如何避免Tkinter中Canvas拖拽影响元素可移动性？

问题现象 #

向特定方向拖拽Canvas时会影响其上元素的可移动性：拖拽Canvas后，仅拖拽方向对侧的元素可被正常移动，尝试拖动其他元素时无反应，反而会触发对侧元素移动，导致元素移动功能完全混乱。需要实现Canvas正常拖拽，同时保证任意位置的元素都能独立正常拖动。

问题根源 #

1. Canvas绑定了<Button-1>事件到get_canvas_coordinates函数，该函数会在点击元素时触发，干扰了元素自身的拖拽事件逻辑
2. adjust_item_coordinates函数错误地在Canvas拖拽结束后强制调整所有元素坐标，破坏了元素的原始位置关系
3. 元素拖拽时未将窗口坐标转换为Canvas滚动后的实际坐标，导致位置计算偏差

修正方案 #

1. 移除Canvas上的<Button-1>绑定，避免干扰元素的点击拖拽事件
2. 删除adjust_item_coordinates函数及相关的坐标调整逻辑，Canvas的scan系列方法本身就能正确处理视图滚动，无需手动修改元素坐标
3. 元素拖拽时使用canvas.canvasx()和canvas.canvasy()将鼠标的窗口坐标转换为Canvas的实际坐标，确保拖拽位置计算准确

修正后代码 #

from tkinter import *
from tkinter import ttk
from PIL import Image, ImageTk

win = Tk()
win.geometry("800x600")

canvas = Canvas(win, width=1000, height=1000, bg="white")
x_scrollbar = ttk.Scrollbar(win, orient="horizontal", command=canvas.xview)
x_scrollbar.pack(side="bottom", fill="x")
y_scrollbar = ttk.Scrollbar(win, orient="vertical", command=canvas.yview)
y_scrollbar.pack(side="right", fill="y")
canvas.configure(xscrollcommand=x_scrollbar.set, yscrollcommand=y_scrollbar.set)
canvas.pack(side="left", fill="both", expand=True)

drag_data = {'x': 0, 'y': 0, 'item': None}

# Function to start dragging an image
def start_drag(event):
    # 转换为Canvas实际坐标
    canvas_x = canvas.canvasx(event.x)
    canvas_y = canvas.canvasy(event.y)
    drag_data['item'] = canvas.find_closest(canvas_x, canvas_y)[0]
    drag_data['x'] = canvas_x
    drag_data['y'] = canvas_y

# Function to stop dragging an image
def stop_drag(event):
    drag_data['item'] = None
    drag_data['x'] = 0
    drag_data['y'] = 0

# Function to move the dragged image
def drag(event):
    if drag_data['item']:
        # 转换为Canvas实际坐标
        canvas_x = canvas.canvasx(event.x)
        canvas_y = canvas.canvasy(event.y)
        delta_x = canvas_x - drag_data['x']
        delta_y = canvas_y - drag_data['y']
        canvas.move(drag_data['item'], delta_x, delta_y)
        drag_data['x'] = canvas_x
        drag_data['y'] = canvas_y

# 加载图片并绑定拖拽事件
image1 = ImageTk.PhotoImage(Image.open('a1.png'))
img1 = canvas.create_image(147, 130, anchor=NW, image=image1)
canvas.tag_bind(img1, '<ButtonPress-1>', start_drag)
canvas.tag_bind(img1, '<ButtonRelease-1>', stop_drag)
canvas.tag_bind(img1, '<B1-Motion>', drag)

image2 = ImageTk.PhotoImage(Image.open('b1.png'))
img2 = canvas.create_image(400, 300, anchor=NW, image=image2)
canvas.tag_bind(img2, '<ButtonPress-1>', start_drag)
canvas.tag_bind(img2, '<ButtonRelease-1>', stop_drag)
canvas.tag_bind(img2, '<B1-Motion>', drag)

image3 = ImageTk.PhotoImage(Image.open('c1.png'))
img3 = canvas.create_image(700, 500, anchor=NW, image=image3)
canvas.tag_bind(img3, '<ButtonPress-1>', start_drag)
canvas.tag_bind(img3, '<ButtonRelease-1>', stop_drag)
canvas.tag_bind(img3, '<B1-Motion>', drag)

# Canvas拖拽滚动逻辑（保留原有功能）
def limit_canvas_scroll(canvas, x, y):
    canvas.scan_dragto(x, y, gain=1)

canvas.bind("<ButtonPress-2>", lambda event: canvas.scan_mark(event.x, event.y))
canvas.bind("<B2-Motion>", lambda event: limit_canvas_scroll(canvas, event.x, event.y))

win.mainloop()

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