Drag-n-drop cards in layout

[s71m]

Inspired by examples/trello_cards

from __future__ import annotations

from typing import Callable, Optional, Protocol
from nicegui import ui

class Item(Protocol):
    title: str

dragged: Optional['card'] = None
drop_target: Optional['card'] = None

class card(ui.card):
    def __init__(self, item: Item, container: grid_container) -> None:
        super().__init__()
        self.item = item
        self.container = container

        # Make the whole card a drop target
        self.on('dragover.prevent', self.handle_dragover)
        self.on('dragleave', self.handle_dragleave)
        self.on('drop', self.handle_drop)

        with self.classes('bg-grey-1 m-2 w-48'):
            # Card header with drag handle
            with ui.row().classes('w-full justify-between items-center p-2 bg-blue-100 rounded-t'):
                with ui.element('div').classes('flex items-center'):
                    # Label what showing the title when dragging
                    label = ui.label(item.title).classes('bg-blue-500 text-white px-2 py-1 rounded text-sm mr-2')
                    label.props('draggable').classes('cursor-move')
                    label.on('dragstart', self.handle_dragstart)

            # Card content
            with ui.card_section().classes('p-4'):
                ui.label(f"Content for {item.title}").classes('text-sm')

    def handle_dragstart(self, e) -> None:
        global dragged
        dragged = self

    def handle_dragover(self, e) -> None:
        global drop_target
        if self != dragged:
            drop_target = self
            self.classes(add='border-2 border-blue-500')

    def handle_dragleave(self, e) -> None:
        global drop_target
        if drop_target == self:
            drop_target = None
            self.classes(remove='border-2 border-blue-500')

    def handle_drop(self, e) -> None:
        global dragged, drop_target
        if dragged and drop_target and dragged != drop_target:
            # Update the container's cards order
            self.container.reorder_cards(dragged, drop_target)

            # Reset states
            drop_target.classes(remove='border-2 border-blue-500')
            dragged = None
            drop_target = None

class grid_container(ui.element):
    def __init__(self, name: str, on_reorder: Optional[Callable[[Item, Item], None]] = None) -> None:
        super().__init__('div')
        self.on_reorder = on_reorder
        self.items = []

        with self.classes('w-full p-4'):
            ui.label(name).classes('text-xl font-bold mb-4')
            self.grid = ui.grid(columns=3).classes('gap-4 justify-start')

    def add_card(self, item: Item) -> None:
        self.items.append(item)
        self.rebuild_grid()

    def rebuild_grid(self) -> None:
        self.grid.clear()
        with self.grid:
            for item in self.items:
                card(item, self)

    def reorder_cards(self, dragged_card: card, target_card: card) -> None:
        try:
            # Find positions in items list
            drag_item = dragged_card.item
            drop_item = target_card.item

            drag_idx = self.items.index(drag_item)
            drop_idx = self.items.index(drop_item)

            # Reorder items
            self.items.insert(drop_idx, self.items.pop(drag_idx))

            # Rebuild grid with new order
            self.rebuild_grid()

            if self.on_reorder:
                self.on_reorder(drag_item, drop_item)

        except Exception as e:
            print(f"Error during reorder: {e}")

@ui.page('/')
def create_demo():
    from dataclasses import dataclass

    @dataclass
    class CardItem:
        title: str

    # Create items
    items = [
        CardItem("Card 1"),
        CardItem("Card 2"),
        CardItem("Card 3"),
        CardItem("Card 4"),
        CardItem("Card 5"),
        CardItem("Card 6"),
    ]

    def handle_reorder(dragged_item: Item, target_item: Item):
        print(f"Reordered: {dragged_item.title} relative to {target_item.title}")

    # Create container and add cards
    with ui.card().classes('w-full mx-auto max-w-5xl'):
        cont = grid_container("My Cards", on_reorder=handle_reorder)
        for item in items:
            cont.add_card(item)

ui.run()

nicegui_dragndrop.mp4

[s71m]

A little improvement:

• CardsContainer.
  Manages grid with collection of cards
• CardTemplate (Base Class).
  Base UI card with drag-drop functionality. Can be extended to create new card types, for example ChartCard

from nicegui import ui
import random
from enum import Enum
from typing import Optional, Callable, Union

# Global variables to track drag and drop state
dragged = None
drop_target = None


class CardTemplate(ui.card):
    def __init__(self, name: str, card_dict: dict, cls_card_container) -> None:
        super().__init__()
        self.name = name
        self.card_dict = card_dict
        self.cls_card_container = cls_card_container

        self.ui_info_label = None
        self.overlay = None
        self.zones = {}

        self.classes('w-full h-full shadow-lg transition-shadow hover:shadow-xl p-0 relative')
        self.style(f'height: {self.cls_card_container.card_height}px;')

        self.render()

    def render(self):
        """Template method defining the card structure"""
        with self:
            self.header()
            self.content()
            self.drag_zones()

    def header(self):
        with ui.row().classes('w-full flex items-center min-h-[2.5rem] bg-[#262b2e] rounded-t'):
            # Draggable name element
            with ui.element('span').props('draggable') \
                    .classes('w-16 flex items-center justify-center text-base font-medium text-white cursor-move ml-2') as header:
                ui.html(self.name).classes('select-text truncate')

            header.on('dragstart', self.handle_drag_start)
            header.on('dragend', self.handle_drag_end)

            # Vertical divider
            ui.element('div').classes('w-px h-5 bg-gray-600')

            # Right-aligned info label
            self.ui_info_label = ui.label('').classes('text-white text-sm flex-grow px-1 py-2 text-right')

            # Fullscreen and close buttons
            with ui.row().classes('flex items-center gap-0.5 mr-1 shrink-0'):
                ui.icon('fullscreen', size='24px') \
                    .classes('cursor-pointer text-gray-600 hover:text-white') \
                    .on('click', self.handle_fullscreen)
                ui.icon('close', size='24px') \
                    .classes('cursor-pointer text-gray-600 hover:text-white') \
                    .on('click', self.handle_remove)

    def content(self):
        """Abstract method to be implemented by subclasses"""
        raise NotImplementedError

    def drag_zones(self):
        """Add transparent left and right drop zones over the card."""
        with ui.element('div').classes('absolute inset-[0.2rem] flex overlay').style('pointer-events: none;') as self.overlay:
            for side in ['left', 'right']:
                with ui.element('div').classes(f'w-1/2 h-full {side}-zone').style('pointer-events: none;'):
                    zone = ui.element('div').classes('w-full h-full')
                    self.zones[side] = zone
                    zone.on('dragover.prevent', lambda e, s=side: self.handle_drag_over(e, s))
                    zone.on('dragleave', self.handle_drag_leave)
                    zone.on('drop', lambda e, s=side: self.handle_drop(e, s))

    def handle_drag_start(self, e):
        global dragged
        dragged = self
        ui.run_javascript('''
            document.querySelectorAll('.left-zone, .right-zone').forEach(zone => {
                zone.style.pointerEvents = 'auto';
            });
        ''')

    def handle_drag_end(self, e):
        global drop_target
        if drop_target == self:
            drop_target = None
        self.remove_highlight()
        ui.run_javascript('''
            document.querySelectorAll('.left-zone, .right-zone').forEach(zone => {
                zone.style.pointerEvents = 'none';
            });
        ''')

    def handle_drag_over(self, e, side: str):
        global drop_target
        if self != dragged:
            drop_target = self
            self.zones[side].classes(add='highlight')
            other_side = 'right' if side == 'left' else 'left'
            self.zones[other_side].classes(remove='highlight')

    def handle_drag_leave(self, e):
        self.remove_highlight()

    def remove_highlight(self):
        for zone in self.zones.values():
            zone.classes(remove='highlight')

    def handle_drop(self, e, side: str):
        global dragged, drop_target
        if dragged and drop_target and dragged != drop_target:
            self.cls_card_container.reorder_cards(dragged, drop_target, position=side)
            dragged = None
            drop_target = None
        self.remove_highlight()

    def handle_fullscreen(self):
        ui.run_javascript(f'''
            const element = document.querySelector(".q-card[id='c{self.id}']");
            if (!document.fullscreenElement) {{
                element.requestFullscreen();
            }} else {{
                document.exitFullscreen();
            }}
        ''')

    def handle_remove(self):
        self.cls_card_container.remove_card(self.name)


class ChartCard(CardTemplate):
    def content(self):
        """Implements chart content with random series data"""
        # print(self.card_dict)
        with ui.card_section().classes('p-2 w-full h-full'):
            options = {
                'tooltip': {},
                'grid': {
                    'top': 30,
                    'right': 30,
                    'bottom': 30,
                    'left': 30
                },
                'legend': {
                    'data': ['Sales', 'Revenue', 'Growth']
                },
                'xAxis': {
                    'type': 'category',
                    'data': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
                },
                'yAxis': {
                    'type': 'value'
                },
                'series': [
                    {
                        'name': 'Sales',
                        'type': 'bar',
                        'data': [random.randint(50, 200) for _ in range(6)]
                    },
                    {
                        'name': 'Revenue',
                        'type': 'line',
                        'data': [random.randint(100, 300) for _ in range(6)]
                    },
                    {
                        'name': 'Growth',
                        'type': 'bar',
                        'data': [random.randint(20, 100) for _ in range(6)]
                    }
                ]
            }
            ui_chart = ui.echart(options).classes('w-full h-full').props(f'id="{self.name}"')
            ui_chart.on_point_click(self.handle_chart_select)

    def handle_chart_select(self, e):
        if e:
            info_text = f"Clicked point - Name: {e.name}, Value: {e.value}"
            self.ui_info_label.set_text(info_text)


class CardType(Enum):
    CHART = ChartCard


class CardContainer(ui.grid):
    def __init__(self, columns: int = 3,
                 card_type: Union[CardType, dict] = CardType.CHART,
                 card_height: int = 300
                 ):
        super().__init__(columns=columns)
        self.ui_cards = {}
        self.card_type = card_type.value
        self.card_height = card_height

        self.classes('w-full')
        ui.add_head_html('''
        <style>
            .left-zone .highlight {
                background-color: rgba(211, 211, 211, 0.3);
            }
            .right-zone .highlight {
                background-color: rgba(128, 255, 128, 0.2);
            }
        </style>
        ''')

    def add_card(self, card_name: str, card_dict: dict) -> None:
        if card_name not in self.ui_cards:
            with self:
                self.ui_cards[card_name] = self.card_type(
                    card_name,
                    card_dict,
                    self
                )

    def remove_card(self, card_name: str) -> None:
        if card_name in self.ui_cards:
            self.ui_cards[card_name].delete()
            del self.ui_cards[card_name]

    def clear_cards(self) -> None:
        for card in list(self.ui_cards.values()):
            card.delete()
        self.ui_cards.clear()

    def reorder_cards(self, dragged_card: CardTemplate, target_card: CardTemplate, position: str = 'left') -> None:
        dragged_name = dragged_card.name
        target_name = target_card.name

        if dragged_name not in self.ui_cards or target_name not in self.ui_cards:
            return

        if position == 'left':
            insert_code = 'parent.insertBefore(draggedCard, targetCard);'
        else:
            insert_code = 'parent.insertBefore(draggedCard, targetCard.nextSibling);'

        ui.run_javascript(f'''
            const draggedCard = document.querySelector(".q-card[id='c{dragged_card.id}']");
            const targetCard = document.querySelector(".q-card[id='c{target_card.id}']");
            if (draggedCard && targetCard) {{
                const parent = draggedCard.parentNode;
                {insert_code}
            }}
        ''')

        cards = list(self.ui_cards.items())
        dragged_idx = next(i for i, (name, _) in enumerate(cards) if name == dragged_name)
        target_idx = next(i for i, (name, _) in enumerate(cards) if name == target_name)

        cards.pop(dragged_idx)

        if position == 'left':
            insert_idx = target_idx if target_idx > dragged_idx else target_idx
        else:
            insert_idx = target_idx + 1 if target_idx >= dragged_idx else target_idx + 1

        cards.insert(insert_idx, (dragged_name, dragged_card))
        self.ui_cards = dict(cards)

@ui.page("/")
def main():

    container = CardContainer(columns=3, card_height=400)

    # Add sample cards
    for i in range(6):
        card_name = f'Chart {i + 1}'
        card_data = {'data': f'Sample data for {card_name}'}
        container.add_card(card_name, card_data)

ui.run(dark=True)

ng_cards_dnd.mp4