Drag and Drop Mouse Event

Drag and Drop Image

<B1-Motion> Mouse Left button Press and move

We can read the x ( horizontal ) and y ( vertical ) coordinates of the mouse pointer when left buton is pressed and mouse is in motion.

Here is the script to display x and y coordinates when mouse is in motion ( left button is pressed )

Used one Label to display the coordinates. By using config() inside a callback function my_callback() we will update the text option of the Label by displaying the changing values of x and y coordinates.

Here is the event which will trigger the callback function my_callback()
my_w.bind('<B1-Motion>',my_callback)
Full code is here.
import tkinter as tk my_w = tk.Tk()my_w.geometry("615x400")  # width and height def my_callback(event):     l1.config(text='Position x : '+ str(event.x) +", y : "+ str(event.y))l1=tk.Label(my_w,text='to Display',bg='yellow',font=30)l1.pack(padx=10,pady=10)my_w.bind('<B1-Motion>',my_callback) # Mouse left button pressed movemy_w.mainloop()

Tkinter Drag and Drop image using Left mouse button press and move event using canvas

Adding image and canvas

We will add one canvas to the above window and place one image inside the canvas.
f_img = tk.PhotoImage(file = "D:\\top2.png") # path of the imagemy_c = tk.Canvas(my_w,width=600,height=400) # canvas size my_c.pack() # place on pack my_img = my_c.create_image(180, 50,  image=f_img) # add image to canvas

Drag and Drop ( DND )

We will move the image by updating the x and y coordinates of the image ( inside the canvas ) by reading the event.x and event.y values.
import tkinter as tk 
my_w = tk.Tk()
my_w.geometry("615x400")  # width and height def my_callback(event):
    global f_img
    l1.config(text='Position x : '+ str(event.x) +", y : "+ str(event.y))
    f_img = tk.PhotoImage(file = "D:\\top2.png") 
    my_img = my_c.create_image(event.x, event.y,  image=f_img)
l1=tk.Label(my_w,text='to Display',bg='yellow',font=30)l1.pack(padx=10,pady=5)
f_img = tk.PhotoImage(file = "D:\\top2.png") # path of the image
my_c = tk.Canvas(my_w,width=600,height=400) # canvas size 
my_c.pack() # place on pack 
my_img = my_c.create_image(180, 50,  image=f_img) # add image to canvas
my_w.bind('<B1-Motion>',my_callback) # Mouse left button pressed movemy_w.mainloop()

Drag and Drop a Button without using Canvas

Mouse Drag & Drop a button in a Tkinter Window


We will use place to position widgets as we need varying x and y coordinates.
Here we used one Button, but any other widget can be used.
import tkinter as tk 
my_w = tk.Tk()
my_w.geometry("615x400")  # width and height 
def my_callback(event):
     l1.config(text='Position x : '+ str(event.x) +", y : "+ str(event.y))
     bt1.pack_forget() # remove the button
     bt1.place(x=event.x,y=event.y) # create at new coordinate
l1=tk.Label(my_w,text='to Display',bg='yellow',font=30)
l1.place(x=0,y=0)

bt1=tk.Button(my_w,text='Button',bg='lightgreen',font=12)
bt1.place(x=150,y=180,anchor='se')
my_w.bind('<B1-Motion>',my_callback) # Mouse left button pressed move

my_w.mainloop()
⚡ Master Tkinter Drag and Drop
Enter and Leave Mouse events. Moving elements using arrow keys. Tkinter Canvas Animation using Rectangles & Circles
Sin & cos curves in CanvasMore Projects using Tkinter
Subhendu Mohapatra — author at plus2net
Subhendu Mohapatra

Author

🎥 Join me live on YouTube

Passionate about coding and teaching, I publish practical tutorials on PHP, Python, JavaScript, SQL, and web development. My goal is to make learning simple, engaging, and project‑oriented with real examples and source code.



Subscribe to our YouTube Channel here



plus2net.com







Python Video Tutorials
Python SQLite Video Tutorials
Python MySQL Video Tutorials
Python Tkinter Video Tutorials
We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles Contact us
©2000-2025   plus2net.com   All rights reserved worldwide Privacy Policy Disclaimer