Drag and Drop Support

[Akascape]

Can we implement the drag and drop file feature in widgets like TkinterDND?

Or is there any other way to use customtkinter with TkinterDND?

[Akascape]

Ways to implement the drag and drop file functionality in customtkinter.

Method 1

FIrst install tkinterdnd2:

pip install tkinterdnd2

Now use it in the code like this:

import customtkinter
from tkinterdnd2 import TkinterDnD, DND_ALL

class CTk(customtkinter.CTk, TkinterDnD.DnDWrapper):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.TkdndVersion = TkinterDnD._require(self)

def get_path(event):
    dropped_file = event.data.replace("{","").replace("}", "")
    # do further operation

root = CTk()
root.drop_target_register(DND_ALL)
root.dnd_bind("<<Drop>>", get_path)

root.mainloop()

Method 2

Using pywinstyles (only works in windows), the most simple way

def drop_func(file):
  print(file)

pywinstyles.apply_dnd(widget, drop_func)

Method 3

This is also using tkinterdnd2:

copy the customtkinter folder in the directory where your program is present, browse to customtkinter>windows>ctk_tk.py

Then do these changes in the ctk_tk.py file of customtkinter library.

1. Add this new import: from tkinterdnd2 import *
2. Replace (Ctrl+H) this term: tkinter.Tk with TkinterDnD.Tk.
3. Save the file.

Done!

Now you can implement this drag and drop feature in your application.
Example:

import customtkinter
from tkinterdnd2 import DND_FILES

def drop(event):
    # do operations with event.data file
    label.configure(text=event.data)
                    
root = customtkinter.CTk()
root.geometry("500x200")

label = customtkinter.CTkLabel(root, text="➕ \nDrag & Drop Here", corner_radius=10, fg_color="blue", wraplength=300)
label.pack(expand=True, fill="both", padx=40, pady=40)

# Add this 2 lines to make it a dnd widget
label.drop_target_register(DND_FILES)
label.dnd_bind('<<Drop>>', drop)

root.mainloop()

[Akascape]

Note: while packaging with pyinstaller, add the tkinterdnd2 folder under additional folder option.

[avalon60]

@Akascape, I could use this, but I need to drag widgets and the docs on the tkinterdnd2 are sparse. I wrote a Python class to do this with Tkinter, but it doesn't work for CustomTkinter:

    import tkinter as tk
    
    class DnD():
        """Drag and Drop management class, used to drag one widget over another, target widget. 
        The target widget then takes on the colours of the dragged
        widget."""
        payload = ['', '']
    
        def __init__(self, widget, enable_drag=True, enable_drop=True):
            self.widget = widget
            root.update_idletasks()
    
            self.widget_x_restore = widget.winfo_x()
            self.widget_y_restore = widget.winfo_y()
    
            if enable_drag:
                self.widget.bind("<Button-1>", self.drag_start)
                self.widget.bind("<B1-Motion>", self.drag_motion)
                self.widget.bind("<ButtonRelease-1>", self.restore_position)
                DnD.payload = [self.widget.cget('background'), self.widget.cget('foreground')]
    
            if enable_drop:
                self.widget.bind("<<Drop>>", self.drop)
    
        def drag_start(self, event):
            """The drag_start method is a callback function bound to a mouse action (Button-1 click)."""
            widget = event.widget
            widget.startX = event.x
            widget.startY = event.y
            widget.lift()
    
        def drag_motion(self, event):
            """Callback method, used in binding to mouse pointer motion, causing the dragged widget motion."""
            widget = event.widget
    
            x = widget.winfo_x() - widget.startX + event.x
            y = widget.winfo_y() - widget.startY + event.y
            widget.place(x=x, y=y)
    
        def drop(self, event):
            """Register a widget as a drop target."""
            target_button = event.widget  # Access the target button
            fg_colour, bg_colour = DnD.payload
            target_button.config(bg=bg_colour, fg=fg_colour)  # Change target button color
    
        def restore_position(self, event):
    
            self.widget.place(x=self.widget_x_restore, y=self.widget_y_restore)
            root.update_idletasks()  # move top widget (source widget), to access widget below (target widget)
    
            x, y = event.widget.winfo_pointerxy()
            target = event.widget.winfo_containing(x, y)
    
            target.event_generate("<<Drop>>")
    
    
    # --- main ---
    
    root = tk.Tk()
    
    root.geometry("600x400+200+100")
    
    button1 = tk.Button(root, text="button1", bg="red", fg="red", width=10, height=5)
    button1.place(x=10, y=100)
    
    button2 = tk.Button(root, text="button2", bg="blue", fg="blue", width=10, height=5)
    button2.place(x=200, y=200)
    

    # Register the buttons for drag and drop.
    button1_dnd = DnD(button1)
    button2_dnd = DnD(button2)
    
    root.mainloop() 

I get some strange behaviours when I try to convert over to CTk, e.g. the widget resizing, or disappearing when I try to drag.

[Akascape]

@avalon60 Did you try this? : https://stackoverflow.com/a/75527642

[Akascape]

If you don't want to change the files, try this: https://stackoverflow.com/a/75527642

Now I think this is the better method. ☝️

[avalon60]

Thanks @Akascape, I'll take a look tomorrow 👍

[avalon60]

Well, using tkinterndn2 was a bit of a mare. Using it with a CustomTkinter as a dragged object is either complex or not possible. Anyway, I came up with this class instead, which I think, serves my needs:

import customtkinter as ctk

class CTkButtonDnD():
    """Facilitate drag and drop of CustomTkinter CTkButton.
    Drag a CTkButton over another CTkButton and update the drop target colours,to
    those of the dragged widget. When the operation is completed, the dragged
    widget is returned to its original position."""
    source_fg_color = ''
    source_hover_color = ''

    def __init__(self, widget, enable_drag=True, enable_drop=True):
        self.widget = widget
        self.enable_drag = enable_drag
        self.enable_drop = enable_drop

        print(f'Type of widget: {self.widget}')

        self.initial_position = None
        if enable_drag:
            widget.bind("<Button-1>", self.on_click)
            widget.bind("<ButtonRelease-1>", lambda event: self.restore_position(widget))
        # self.widget_x_restore, self.widget_y_restore = 0, 0
            root.update_idletasks()
            self.widget_x_restore = widget.winfo_x()
            self.widget_y_restore = widget.winfo_y()
            self.pointer_start_x, self.pointer_start_y = 0, 0

        if enable_drop:
            self.widget.bind("<<Drop>>", self.drop)

        self.widget.bind("<Destroy>", self.cleanup)

    def cleanup(self, event=None):
        """Cleanup method to be called when the associated CTkButton widget is destroyed."""
        self.widget.unbind("<Destroy>")
        self.widget.unbind("<Button-1>")
        self.widget.unbind("<ButtonRelease-1>")
        self.widget.unbind("<<Drop>>")

    def on_click(self, event):
        self.pointer_start_x, self.pointer_start_y = event.x, event.y
        widget = event.widget.master
        print(f'Type of clicked widget: {event.widget}')
        print(f'Type of clicked widget parent: {event.widget.master}')
        if self.enable_drag:
            CTkButtonDnD.source_fg_color = widget.cget('fg_color')
            CTkButtonDnD.source_hover_color = widget.cget('hover_color')
            self.widget.bind("<B1-Motion>", self.drag_motion)

        if self.enable_drop:
            self.widget.bind("<ButtonRelease-1>", self.drop)

    def drag_motion(self, event):
        x = self.widget.winfo_x() + event.x - self.pointer_start_x
        y = self.widget.winfo_y() + event.y - self.pointer_start_y
        self.widget.lift()
        self.widget.place(x=x, y=y)

    def drop(self, event):
        self.widget.lower()
        widget = event.widget
        widget.master.configure(fg_color=CTkButtonDnD.source_fg_color, hover_color=CTkButtonDnD.source_hover_color)

    def restore_position(self, widget):
        widget.lower()
        x, y = root.winfo_pointerxy()
        target_widget = root.winfo_containing(x, y)
        widget.place(x=self.widget_x_restore, y=self.widget_y_restore)
        root.update_idletasks()
        target_widget.event_generate('<<Drop>>')

def reset_colors():
    button1.configure(fg_color="red", hover_color="green")
    button2.configure(fg_color="blue", hover_color="black")

root = ctk.CTk()

root.geometry("310x200+200+200")

button1 = ctk.CTkButton(root, fg_color="red", hover_color="green", width=100, height=50)
button1.place(x=10, y=50)
button1_dnd = CTkButtonDnD(button1, True, True)

button2 = ctk.CTkButton(root, fg_color="blue", hover_color="black", width=100, height=50)
button2.place(x=200, y=50)
button2_dnd = CTkButtonDnD(button2, True, True)

button_reset = ctk.CTkButton(root, text='Reset', width=100, command=reset_colors)
button_reset.place(x=200, y=160)

root.mainloop()

[Akascape]

@avalon60 Tkinterdnd2 is for adding drag and drop support for files. Means any external file can be dropped to the tkinter window and it will call a function (with the file path) when this event happens.

On the other hand, dnd feature for a widget inside the window is a different thing which can be implemented with motion events.

[avalon60]

That's the problem with tkinterdnd2 - the docs don't explain much. Well actually, there aren't really any docs, so it's not clear what exactly its scope is. Anyway, I think that this solution should provide what I want.

[Proxlight]

🚀 Looking to create stunning Python GUIs with ease? Check out Buildfy, a powerful drag-and-drop GUI builder for Python that integrates seamlessly with CustomTkinter! 🎨

With Buildfy, you can:

Quickly design modern, sleek interfaces without writing a single line of code
Access a variety of widgets (now available to all users for free!)
Explore AI-powered design features with Buildfy Pro for even faster, more professional GUI creation
Get started today and level up your Python projects: https://buildfygui.netlify.app/
Check out the full tutorial here: https://youtu.be/h65qzqee4nU?si=8Ys9GU-zTyxgRFKh

#Python #PythonGUI #Buildfy #Tkinter #AI #AppDevelopment