DragTarget
A control that completes drag operation when a Draggable control is dropped.
When a Draggable is dragged on top of a DragTarget, the DragTarget is asked
whether it will accept the data the Draggable is carrying. The DragTarget will
accept incoming drag if it belongs to the same group as Draggable. If the user
does drop the Draggable on top of the DragTarget (and the DragTarget has
indicated that it will accept the Draggable's data), then the DragTarget is
asked to accept the Draggable's data.
Inherits: Control
Properties
Events
Examples
Drag and drop containers
play_arrowTry Online
import flet as ft
def main(page: ft.Page):
def handle_drag_will_accept(e: ft.DragWillAcceptEvent):
e.control.content.border = ft.Border.all(
2,
ft.Colors.BLACK_45 if e.accept else ft.Colors.RED,
)
e.control.update()
def handle_drag_accept(e: ft.DragTargetEvent):
e.control.content.bgcolor = e.src.content.bgcolor
e.control.content.border = None
e.control.update()
def handle_drag_leave(e: ft.DragTargetLeaveEvent):
e.control.content.border = None
e.control.update()
page.add(
ft.SafeArea(
content=ft.Row(
controls=[
ft.Column(
controls=[
ft.Draggable(
group="color",
content=ft.Container(
width=50,
height=50,
bgcolor=ft.Colors.CYAN,
border_radius=5,
),
content_feedback=ft.Container(
width=20,
height=20,
bgcolor=ft.Colors.CYAN,
border_radius=3,
),
),
ft.Draggable(
group="color",
content=ft.Container(
width=50,
height=50,
bgcolor=ft.Colors.YELLOW,
border_radius=5,
),
),
ft.Draggable(
group="color",
content=ft.Container(
width=50,
height=50,
bgcolor=ft.Colors.GREEN,
border_radius=5,
),
),
],
),
ft.Container(width=100),
ft.DragTarget(
group="color",
on_will_accept=handle_drag_will_accept,
on_accept=handle_drag_accept,
on_leave=handle_drag_leave,
content=ft.Container(
width=50,
height=50,
bgcolor=ft.Colors.BLUE_GREY_100,
border_radius=5,
),
),
],
),
)
)
if __name__ == "__main__":
ft.run(main)
Drag and drop containers declarative
play_arrowTry Online
from dataclasses import dataclass
import flet as ft
@dataclass
@ft.observable
class TargetState:
bgcolor: ft.Colors = ft.Colors.BLUE_GREY_100
is_drag_over: bool = False
@ft.component
def App():
target, _ = ft.use_state(lambda: TargetState())
def on_will_accept(_: ft.DragWillAcceptEvent):
target.is_drag_over = True
def on_accept(e: ft.DragTargetEvent):
target.bgcolor = e.src.data
target.is_drag_over = False
def on_leave(_: ft.DragTargetLeaveEvent):
target.is_drag_over = False
return ft.SafeArea(
content=ft.Row(
controls=[
ft.Column(
controls=[
ft.Draggable(
group="color",
data=ft.Colors.CYAN,
content=ft.Container(
width=50,
height=50,
bgcolor=ft.Colors.CYAN,
border_radius=5,
),
content_feedback=ft.Container(
width=20,
height=20,
bgcolor=ft.Colors.CYAN,
border_radius=3,
),
),
ft.Draggable(
group="color",
data=ft.Colors.YELLOW,
content=ft.Container(
width=50,
height=50,
bgcolor=ft.Colors.YELLOW,
border_radius=5,
),
),
ft.Draggable(
group="color",
data=ft.Colors.GREEN,
content=ft.Container(
width=50,
height=50,
bgcolor=ft.Colors.GREEN,
border_radius=5,
),
),
],
),
ft.Container(width=100),
ft.DragTarget(
group="color",
on_will_accept=on_will_accept,
on_accept=on_accept,
on_leave=on_leave,
content=ft.Container(
width=50,
height=50,
bgcolor=target.bgcolor,
border=(
ft.Border.all(2, ft.Colors.BLACK_45)
if target.is_drag_over
else None
),
border_radius=5,
),
),
],
),
)
def main(page: ft.Page):
page.render(App)
if __name__ == "__main__":
ft.run(main)
Properties
Events
on_acceptclass-attributeinstance-attribute
on_accept: EventHandler[DragTargetEvent] | None = NoneCalled when the user does drop an acceptable (same group) Draggable on this target.
on_leaveclass-attributeinstance-attribute
on_leave: EventHandler[DragTargetLeaveEvent] | None = NoneCalled when a Draggable leaves this target.
on_moveclass-attributeinstance-attribute
on_move: EventHandler[DragTargetEvent] | None = NoneCalled when a Draggable moves within this target.
on_will_acceptclass-attributeinstance-attribute
on_will_accept: EventHandler[DragWillAcceptEvent] | None = (
None
)Called when a Draggable is dragged on this target.