demonstrating "on_drop" event

examples/trello_cards/draganddrop.py

@@ -1,19 +1,22 @@
 from __future__ import annotations
 
-from typing import Optional
+from typing import Callable, Optional
 
 from nicegui import ui
 
+dragged: Optional[card] = None
+
 
 class column(ui.column):
 
-    def __init__(self, name: str) -> None:
+    def __init__(self, name: str, on_drop: Callable = None) -> None:
         super().__init__()
         with self.classes('bg-grey-5 w-60 p-4 rounded shadow-2'):
             ui.label(name).classes('text-bold ml-1')
         self.on('dragover.prevent', self.highlight)
         self.on('dragleave', self.unhighlight)
         self.on('drop', self.move_card)
+        self.on_drop = on_drop
 
     def highlight(self) -> None:
         self.classes(add='bg-grey-2')
@@ -22,14 +25,16 @@ class column(ui.column):
         self.classes(remove='bg-grey-2')
 
     def move_card(self) -> None:
+        global dragged
         self.unhighlight()
-        card.dragged.parent_slot.parent.remove(card.dragged)
+        dragged.parent_slot.parent.remove(dragged)
         with self:
-            card(card.dragged.text)
+            card(dragged.text)
+        self.on_drop(dragged)
+        dragged = None
 
 
 class card(ui.card):
-    dragged: Optional[card] = None
 
     def __init__(self, text: str) -> None:
         super().__init__()
@@ -39,4 +44,5 @@ class card(ui.card):
         self.on('dragstart', self.handle_dragstart)
 
     def handle_dragstart(self) -> None:
-        card.dragged = self
+        global dragged
+        dragged = self

examples/trello_cards/main.py

@@ -3,16 +3,21 @@ import draganddrop as dnd
 
 from nicegui import ui
 
+
+def on_drop(card: dnd.card, location: str):
+    ui.notify(f'"{card.text}" is now in {location}')
+
+
 with ui.row():
-    with dnd.column('Next'):
+    with dnd.column('Next', on_drop=lambda card: on_drop(card, 'Next')):
         dnd.card('Improve Documentation')
         dnd.card('Simplify Layouting')
         dnd.card('Provide Deployment')
-    with dnd.column('Doing'):
+    with dnd.column('Doing', on_drop=lambda card: on_drop(card, 'Doing')):
         dnd.card('Release Standalone-Mode')
-    with dnd.column('Done'):
+    with dnd.column('Done', on_drop=lambda card: on_drop(card, 'Done')):
         dnd.card('Invent NiceGUI')
         dnd.card('Test in own Projects')
         dnd.card('Publish as Open Source')
 
-ui.run(standalone=True)
+ui.run()