introduce element.move()

nicegui/element.py

@@ -266,6 +266,20 @@ class Element(Visibility):
             slot.children.clear()
         self.update()
 
+    def move(self, target_container: Optional[Element] = None, target_index: int = -1):
+        """Move the element to another container.
+
+        :param target_container: container to move the element to (default: the parent container)
+        :param target_index: index within the target slot (default: append to the end)
+        """
+        self.parent_slot.children.remove(self)
+        self.parent_slot.parent.update()
+        target_container = target_container or self.parent_slot.parent
+        target_index = target_index if target_index >= 0 else len(target_container.default_slot.children)
+        target_container.default_slot.children.insert(target_index, self)
+        self.parent_slot = target_container.default_slot
+        target_container.update()
+
     def remove(self, element: Union[Element, int]) -> None:
         """Remove a child element.
 

tests/test_element.py

@@ -136,3 +136,28 @@ def test_remove_and_clear(screen: Screen):
     screen.should_not_contain('Label A')
     screen.should_not_contain('Label B')
     screen.should_not_contain('Label C')
+
+
+def test_move(screen: Screen):
+    with ui.card() as a:
+        ui.label('A')
+        x = ui.label('X')
+
+    with ui.card() as b:
+        ui.label('B')
+
+    ui.button('Move X to A', on_click=lambda: x.move(a))
+    ui.button('Move X to B', on_click=lambda: x.move(b))
+    ui.button('Move X to top', on_click=lambda: x.move(target_index=0))
+
+    screen.open('/')
+    assert screen.find('A').location['y'] < screen.find('X').location['y'] < screen.find('B').location['y']
+    screen.click('Move X to B')
+    screen.wait(0.5)
+    assert screen.find('A').location['y'] < screen.find('B').location['y'] < screen.find('X').location['y']
+    screen.click('Move X to A')
+    screen.wait(0.5)
+    assert screen.find('A').location['y'] < screen.find('X').location['y'] < screen.find('B').location['y']
+    screen.click('Move X to top')
+    screen.wait(0.5)
+    assert screen.find('X').location['y'] < screen.find('A').location['y'] < screen.find('B').location['y']

website/more_documentation/element_documentation.py

@@ -1,6 +1,25 @@
 from nicegui import ui
 
+from ..documentation_tools import text_demo
+
 
 def main_demo() -> None:
     with ui.element('div').classes('p-2 bg-blue-100'):
         ui.label('inside a colored div')
+
+
+def more() -> None:
+    @text_demo('Move elements', '''
+        This demo shows how to move elements between or within containers.
+    ''')
+    def move_elements() -> None:
+        with ui.card() as a:
+            ui.label('A')
+            x = ui.label('X')
+
+        with ui.card() as b:
+            ui.label('B')
+
+        ui.button('Move X to A', on_click=lambda: x.move(a))
+        ui.button('Move X to B', on_click=lambda: x.move(b))
+        ui.button('Move X to top', on_click=lambda: x.move(target_index=0))