Drag and Drop Mouse Event


Youtube Live session on Tkinter

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 move
my_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 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

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 move
my_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()
Enter and Leave Mouse events. Moving elements using arrow keys. Tkinter Canvas Animation using Rectangles & Circles
Sin & cos curves in Canvas More Projects using Tkinter
Subscribe to our YouTube Channel here


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    Post your comments , suggestion , error , requirements etc here





    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 FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer