可拖动控件 Draggable

可拖动控件可以从中拖动到拖放目标控件上。

当可拖动控件检测到拖动手势的开始时，它会显示一个跟踪用户手指在屏幕上移动的content_feedback控件。如果用户在位于拖放目标控件之上抬起手指，那么该目标控件将有机会完成拖放操作。

当零个拖放操作正在进行时，此控件显示content。如果content_when_dragging不为空，则当一个或多个拖放操作正在进行时，此控件将显示content_when_dragging。否则，无论何时此控件都将显示content。

示例

在线示例

拖放颜色

Python

import flet
from flet import (
    Column,
    Container,
    Draggable,
    DragTarget,
    DragTargetAcceptEvent,
    Page,
    Row,
    border,
    colors,
)


def main(page: Page):
    page.title = "拖放示例"

    def drag_will_accept(e):
        e.control.content.border = border.all(
            2, colors.BLACK45 if e.data == "true" else colors.RED
        )
        e.control.update()

    def drag_accept(e: DragTargetAcceptEvent):
        src = page.get_control(e.src_id)
        e.control.content.bgcolor = src.content.bgcolor
        e.control.content.border = None
        e.control.update()

    def drag_leave(e):
        e.control.content.border = None
        e.control.update()

    page.add(
        Row(
            [
                Column(
                    [
                        Draggable(
                            group="color",
                            content=Container(
                                width=50,
                                height=50,
                                bgcolor=colors.CYAN,
                                border_radius=5,
                            ),
                            content_feedback=Container(
                                width=20,
                                height=20,
                                bgcolor=colors.CYAN,
                                border_radius=3,
                            ),
                        ),
                        Draggable(
                            group="color",
                            content=Container(
                                width=50,
                                height=50,
                                bgcolor=colors.YELLOW,
                                border_radius=5,
                            ),
                        ),
                        Draggable(
                            group="color1",
                            content=Container(
                                width=50,
                                height=50,
                                bgcolor=colors.GREEN,
                                border_radius=5,
                            ),
                        ),
                    ]
                ),
                Container(width=100),
                DragTarget(
                    group="color",
                    content=Container(
                        width=50,
                        height=50,
                        bgcolor=colors.BLUE_GREY_100,
                        border_radius=5,
                    ),
                    on_will_accept=drag_will_accept,
                    on_accept=drag_accept,
                    on_leave=drag_leave,
                ),
            ]
        )
    )


flet.app(target=main)

属性

content

当零个拖放操作正在进行时，可拖动控件显示content。如果content_when_dragging不为空，则当一个或多个拖放操作正在进行时，可拖动控件将显示content_when_dragging。否则，无论何时可拖动控件始终显示content。

content_feedback

拖放操作进行时在指针下方显示的Control。

content_when_dragging

一个Control，当一个或多个拖放操作正在进行时，替代显示content。

如果此属性为None，则此控件始终显示content（因此，在拖放操作进行时，拖动源的表示不会更改）。

group

可拖动控件所属的分组。要使拖放目标控件接受传入的拖放操作，Draggable和DragTarget必须处于同一group中。