How to append draggable content to drag target ?

[noob-infinity]

Question

I have 3 draggable object, yellow,red and blue and one drag target object. Now, I want to append each draggable content object if I drag draggable to target. I have tried with below code which is not working.It is also not showing error.

If I print controls attribute of the row, which inside a container, which is inside drag target, I can see all draggable object are in the list but it is not showing in GUI.

Please help.

Code sample

import flet as ft


def main(page):
    blue_draggable = ft.Draggable(
        group="color",
        content=ft.Container(
            width=50,
            height=50,
            bgcolor=ft.colors.BLUE,
            border_radius=5,
        )
    )

    yellow_draggable = ft.Draggable(
        group="color",
        content=ft.Container(
            width=50,
            height=50,
            bgcolor=ft.colors.YELLOW,
            border_radius=5,
        )
    )

    red_draggable = ft.Draggable(
        group="color",
        content=ft.Container(
            width=50,
            height=50,
            bgcolor=ft.colors.RED,
            border_radius=5,
        )
    )

    def drag_accept(e):
        draggable_src = page.get_control(e.src_id) # Get reference of draggable

        drag_target_content = e.control.content
        print(drag_target_content)
        print(draggable_src)
        print(draggable_src.content)
        drag_target_content.content.controls.append(draggable_src.content)  # Trying to append drggable content to drag_target
        print(drag_target_content.content.controls)
        e.control.update()
        page.update()

    drag_target = ft.DragTarget(
        group="color",
        content=ft.Container(
            content=ft.Row(expand=1, auto_scroll=True, scroll=ft.ScrollMode.ADAPTIVE),
            width=800,
            height=50,
            bgcolor=ft.colors.BLUE_GREY_100,
            border_radius=5,
        ),
        on_accept=drag_accept,
    )
    page.add(blue_draggable)
    page.add(red_draggable)
    page.add(yellow_draggable)
    page.add(drag_target)
ft.app(target=main)

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[noob-infinity]

Can someone help ?

[fsmosca]

To see what happens visually, you need to update the bgcolor of the target once the draggable is dropped.

In drag_accept() add the following.

# Update the bgcolor of drag target.
drag_target_content.bgcolor = draggable_src.content.bgcolor

e.control.update()

Ref: https://flet.dev/docs/controls/draggable

[noob-infinity]

Even after changing the background color of drag target content, draggable is not visible.

[CoutinhoElias]

In this example it changes the dragged object, the aim is that at the origin the object is removed and at the destination both remain (Both what already existed and what we dragged)

I'm also having the same difficulty as @noob-infinity

[CoutinhoElias]

I believe what we are looking for is in this simplified example:

https://github.com/flet-dev/examples/blob/main/python/controls/drag-and-drop/drag-drop-ordering.py

The question now is to fetch items from a database and load them with them listed.

[CoutinhoElias]

In this project I create 4 columns dynamically based on the json contained in the requested_rd.py file

See my code:
https://gist.github.com/CoutinhoElias/0db8828ef525a4e4b0e2ea3e6e4e7a2e

I drag the first column to the place of the last. (It works)
I drag the second column to the place of the last one. (Does not work)

It presents an error before and after releasing the column.
#---------------------------------------------------------------- -------------------------------------------------- ----

First error

Traceback (most recent call last):
File "C:\Users\SV\AppData\Local\Programs\Python\Python39\lib\threading.py", line 950, in _bootstrap_inner
self.run()
File "C:\Users\SV\AppData\Local\Programs\Python\Python39\lib\threading.py", line 888, in run
self._target(*self._args, **self._kwargs)
File "c:\Users\SV\Documents\codes_sv\ft_teste\dd_personalizado.py", line 254, in drag_will_accept
self.page.update()
AttributeError: 'NoneType' object has no attribute 'update'
Happens on line 206
Exception in thread Thread-52:

#---------------------------------------------------------------- -------------------------------------------------- ----

Second error

Traceback (most recent call last):
File "C:\Users\SV\AppData\Local\Programs\Python\Python39\lib\threading.py", line 950, in _bootstrap_inner
self.run()
File "C:\Users\SV\AppData\Local\Programs\Python\Python39\lib\threading.py", line 888, in run
self._target(*self._args, **self._kwargs)
File "C:\Users\SV\kivy_venv\lib\site-packages\flet_core\event_handler.py", line 28, in __sync_handler
h(r)
File "c:\Users\SV\Documents\codes_sv\ft_teste\dd_personalizado.py", line 228, in drag_accept
src = self.page.get_control(e.src_id)
AttributeError: 'NoneType' object has no attribute 'get_control'

I would really appreciate someone's help here.