I want to make a drag drop to arrange the order I want

[bobwatcherx]

Question

on that code. I want to drag drop on text number 0 for example. if I drag text with number 0 to the container which is text number 1 . then the position of container number 0 will move under the container with number 1 . similar to the task arrangement application, but I haven't found a solution yet

Code sample

from flet import *

def main(page: Page):
    page.window_width = 300

    def willdrag(e:DragTargetAcceptEvent):
        src = page.get_control(e.src_id)
        print(src.content.content.value)
        page.update()

    listdata = DragTarget(
        content=Column(),
        on_accept=willdrag
    )

    for x in range(0, 10):
        listdata.content.controls.append(
            Draggable(
                content=Container(
                    bgcolor="green200",
                    width=120,
                    padding=10,
                    data=x,
                    content=Text(x, size=30, weight="bold")
                )
            )
        )

    page.add(
        Column([
            listdata
        ])
    )

flet.app(target=main)

Error message

No response

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

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

[bobwatcherx]

and how to give an event if the draggable will be dragged for example like this

is there event on_will_accept in draggable widget ?

Draggable(
on_will_drag = ?
)

and if will drag . container will change bgcolor

[refandas]

We can make each element as a DragTarget and each DragTarget will contain a Draggable. In the end, the DragTarget will be wrapped with a Column. In the willdrag function, we have a variable e that can be used to obtain the src (as the initial element) and the destination content, which can be obtained with e.control.control.

To exchange elements, we can directly access the data field in the Container and the value field in the Text. After obtaining the values from each of these variables, we can swap their values. The complete code can be seen below.

import flet


def main(page: flet.Page):
    page.window_width = 300

    def willdrag(e: flet.DragTargetAcceptEvent):
        src = page.get_control(e.src_id)

        src_data = src.content.content.value
        dest_data = e.control.content.content.content.value

        # update the value of the data
        src.content.data = dest_data
        e.control.content.content.data = src_data

        # update the value of the Text
        src.content.content.value = dest_data
        e.control.content.content.content.value = src_data

        page.update()

    listdata = flet.Column()

    for x in range(0, 10):
        listdata.controls.append(
            flet.DragTarget(
                content=flet.Draggable(
                    content=flet.Container(
                        bgcolor="green200",
                        width=120,
                        padding=10,
                        data=x,
                        content=flet.Text(value=str(x), size=30, weight="bold"),
                    ),
                ),
                on_accept=willdrag,
            ),
        )

    page.add(
        listdata
    )


flet.app(target=main)

---

Edited

If we want to change the order based on the sifting of the data (not swapping data), such as placing the data at index 3 into index 0 and then shifting data downward form index 0, there are several steps:

1. The data field in the Container is used as a static index for the data order. So, the value of this data will not change.
2. We need to construct a way to obtain value from the entire content of the Column, save into list, and then to shift the data we can use the insert and pop operations within a list.
3. After the data order has been properly shifted, we can re-render the values in the Text.

import flet


def main(page: flet.Page):
    page.window_width = 300

    def willdrag(e: flet.DragTargetAcceptEvent):
        src = page.get_control(e.src_id)

        # get index of the data
        src_index = src.content.data
        dest_index = e.control.content.content.data

        # get the data from the Text
        order_data = [control.content.content.content.value for control in listdata.controls]

        # shift the data
        order_data.insert(dest_index, order_data.pop(src_index))

        # render the data
        if src_index > dest_index:
            for i in range(dest_index, len(order_data)):
                listdata.controls[i].content.content.content.value = order_data[i]
        else:
            for i in range(src_index, dest_index + 1):
                listdata.controls[i].content.content.content.value = order_data[i]

        page.update()

    listdata = flet.Column()

    for x in range(0, 10):
        listdata.controls.append(
            flet.DragTarget(
                content=flet.Draggable(
                    content=flet.Container(
                        bgcolor="green200",
                        width=120,
                        padding=10,
                        data=x,
                        content=flet.Text(value=str(x), size=30, weight="bold"),
                    ),
                ),
                on_accept=willdrag,
            ),
        )

    page.add(
        listdata
    )


flet.app(target=main)

Although this approach works, it can be quite process-intensive. If a large amount of data is used, it may lead to performance issues in the applications.