Trello Cards example not working in native mode

[david-7x0]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from __future__ import annotations
import multiprocessing
multiprocessing.set_start_method("spawn", force=True)

from collections.abc import Callable
from typing import Protocol
from dataclasses import dataclass

from nicegui import ui


class Item(Protocol):
    title: str

dragged: card | None = None


class column(ui.column):

    def __init__(self, name: str, on_drop: Callable[[Item, str], None] | None = None) -> None:
        super().__init__()
        with self.classes('bg-blue-grey-2 w-60 p-4 rounded shadow-2'):
            ui.label(name).classes('text-bold ml-1')
        self.name = name
        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(remove='bg-blue-grey-2', add='bg-blue-grey-3')
        print('highlight')

    def unhighlight(self) -> None:
        self.classes(remove='bg-blue-grey-3', add='bg-blue-grey-2')
        print('unhighlight')

    def move_card(self) -> None:
        global dragged  # pylint: disable=global-statement # noqa: PLW0603
        self.unhighlight()
        dragged.parent_slot.parent.remove(dragged)
        with self:
            card(dragged.item)
        self.on_drop(dragged.item, self.name)
        dragged = None
        print('move_card')


class card(ui.card):

    def __init__(self, item: Item) -> None:
        super().__init__()
        self.item = item
        with self.props('draggable').classes('w-full cursor-pointer bg-grey-1'):
            ui.label(item.title)
        self.on('dragstart', self.handle_dragstart)

    def handle_dragstart(self) -> None:
        global dragged  # pylint: disable=global-statement # noqa: PLW0603
        dragged = self
        print('handle_dragstart')
        
@dataclass
class ToDo:
    title: str


def handle_drop(todo: ToDo, location: str):
    ui.notify(f'"{todo.title}" is now in {location}')
    print('handle_drop')

with ui.row():
    with column('Next', on_drop=handle_drop):
        card(ToDo('Simplify Layouting'))
        card(ToDo('Provide Deployment'))
    with column('Doing', on_drop=handle_drop):
        card(ToDo('Improve Documentation'))
    with column('Done', on_drop=handle_drop):
        card(ToDo('Invent NiceGUI'))
        card(ToDo('Test in own Projects'))
        card(ToDo('Publish as Open Source'))
        card(ToDo('Release Native-Mode'))

# ~ ui.run()
ui.run(native=True, window_size=(800, 600), fullscreen=False)

Description

The Trello Cards example works fine in non-native but in native mode the dragstart event is fired, but not the dragover, dragleave or drop events.
Maybe I'm missing some configuration for the native mode to work. Cheers :)

NiceGUI Version

3.10.0

Python Version

3.12.3

Browser

Firefox

Operating System

Linux

Additional Context

pywebview 6.1

[falkoschindler]

Thanks for reporting this, @david-7x0! You're right — this is a regression introduced in 3.9.0. The native file drop support we added in PR #5866 registered a document-level dragover handler that unconditionally calls preventDefault(), which interferes with in-page HTML5 drag-and-drop.

A fix is up in PR #5943 — it makes the handler only activate when files are being dragged from outside the browser, so in-page drag-and-drop works normally again.