Better support for drag&drop

[falkoschindler]

In principle NiceGUI already supports drag&drop as demonstrated in the "Trello Cards" example. But there are limitations like controlling the cursor image while dragging an item.

I just tried SortableJS which is easy to integrate an comes with plenty of options. Maybe we can integrate it (or a similar library)? Here is a proof of concept:

#!/usr/bin/env python3
from nicegui import globals, nicegui, ui

with ui.row().classes('sortable'):
    for i in range(10):
        with ui.card().classes('cursor-grab'):
            ui.label(f'Item {i}')

@globals.sio.on('drop')
def drop(sid: str, msg: dict):
    nicegui.get_client(sid).elements[msg['item_id']].move(target_index=msg['new_index'])

ui.add_body_html(r'''
<script type="module">
import 'https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js';
document.addEventListener('DOMContentLoaded', () => {
    Sortable.create(document.querySelector('.sortable'), {
        animation: 150,
        ghostClass: 'opacity-50',
        onEnd: (evt) => window.socket.emit("drop", {item_id: parseInt(evt.item.id), new_index: evt.newIndex }),
    });
});
</script>
''')

ui.run()

[falkoschindler]

I imagine an API like this:

def handle_drop(e: events.SortableDropEventArguments) -> None:
    ui.notify(f'Element {e.element} moved from {e.old_index} to {e.new_index}')

with ui.column().sortable(on_drop=handle_drop):
    ui.label('A')
    ui.label('B')
    ui.label('C')

By the way, we need to make sure it works in refreshable UIs:

@ui.refreshable
def create_content(self) -> None:
    with ui.column().sortable(on_drop=self.handle_drop):
        for item in self.items:
            ui.label(item.name)

[sergeyyurkov1]

There is also a Quasar/browser API limitation that prevents drag and drop from working on touch devices.

https://quasar.dev/vue-directives/mutation#drag-and-drop-example

However, I was able to recreate this example with touch support by using Vue.Draggable.

[nhatnamt]

Would you have an example using Vue.Draggable? I'm struggling to get it to work

[bitnom]

Would you have an example using Vue.Draggable? I'm struggling to get it to work

+1. I will need this soon and hope I don't get stuck on it

[sergeyyurkov1]

Do you think it's possible to change the cursor image by replacing the cursor-pointer Tailwind class with, say, cursor-grabbing (inside class card(ui.card):)?

with self.props('draggable').classes('w-full cursor-pointer bg-grey-1'):
    ui.label(item.title)

[falkoschindler]

Yes, you can change the cursor using Tailwind classes. But so far I couldn't find a way to change the plus sign which appears while dragging...

[cinnamonsmoothy]

could you drop an example of this?

[falkoschindler]

@cinnamonsmoothy Here is an example for a label with a "pointer" cursor:

ui.label('Hover me').classes('cursor-pointer')

But as I said, I don't know how to set the cursor while dragging.

[weihuan]

@sergeyyurkov1 hi, I know it's been late, but I did not know no touch support before I use drag-and-drop in my project. can you tell me how to modify drag-and-drop-example to support touch screen, I can not find anyone and any solution after search.
also @falkoschindler please help

[falkoschindler]

Hi @weihuan, here is an updated example for the current NiceGUI version:

from nicegui import context, ui

with ui.row().classes('sortable'):
    for i in range(10):
        with ui.card().classes('cursor-grab'):
            ui.label(f'Item {i}')

ui.on('item-drop', lambda e: context.get_client().elements[e.args['id']].move(target_index=e.args['new_index']))

ui.add_body_html(r'''
	<script type="module">
	import 'https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js';
	document.addEventListener('DOMContentLoaded', () => {
	    Sortable.create(document.querySelector('.sortable'), {
	        animation: 150,
	        ghostClass: 'opacity-50',
	        onEnd: (evt) => emitEvent("item-drop", {id: parseInt(evt.item.id.slice(1)), new_index: evt.newIndex }),
	    });
	});
	</script>
''')

ui.run()

It also works with touch on my phone.
See https://github.com/SortableJS/Sortable for more information about possible configurations.

[lazyhope]

Hi! I just want to know how is the drag & drop api integration going? Is it gonna be an official Nicegui api in the future? Great project BTW!

[falkoschindler]

Unfortunately there are no updates regarding a drag&drop API. 😕
We could certainly use some help from the community. How could such an API look like? How could it be implemented?

[lazyhope]

I see. Thanks for the quick reply! Sorry I have no idea on the implementation. But I was hoping for something similar to a draggable tree (Demo). By the way, is it possible to use quasar extension like this in NiceGUI?

[falkoschindler]

See #1454 for an ongoing discussion about third-party library support.
TL;DR - It's complicated. 😉

[stepheweffie]

Custom draggable element from a template element

from nicegui import ui

source = """
<template id='my-box'>
    <style>
        :host {
          display: block;
          padding: 10px;
          color: white;
          background-color: var(--color);
        }
    </style>
    <slot></slot>
</template>
<script>
    window.customElements.define('my-box', class extends HTMLElement {
        constructor() {
            super();
            const templateEl = document.getElementById('my-box');
            const templateContent = templateEl.content;

            this.attachShadow({mode: 'open'}).appendChild(templateContent.cloneNode(true));
            this.style.setProperty('--color', this.getAttribute('color') || 'gray');
        }
    });
</script>
"""

ui.add_body_html(source)
color = 'purple'
ui.html(f"<my-box color={color}>Hello, this is a message in a {color} box</my-box>")
ui.html(f"<my-box color={color} draggable='true'>You can drag me around!</div>")

ui.run()

[sukhstanford]

from nicegui import globals, nicegui, ui

with ui.row().classes('sortable'):
    for i in range(10):
        with ui.card().classes('cursor-grab'):
            ui.label(f'Item {i}')

@globals.sio.on('drop')
def drop(sid: str, msg: dict):
    nicegui.get_client(sid).elements[msg['item_id']].move(target_index=msg['new_index'])

ui.add_body_html(r'''
<script type="module">
import 'https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js';
document.addEventListener('DOMContentLoaded', () => {
    Sortable.create(document.querySelector('.sortable'), {
        animation: 150,
        ghostClass: 'opacity-50',
        onEnd: (evt) => window.socket.emit("drop", {item_id: parseInt(evt.item.id), new_index: evt.newIndex }),
    });
});
</script>
''')

ui.run()

If ur are using ene change @Globals with nicegui

[HansBambel]

@falkoschindler Thanks for the snippet. Sadly it somehow does not work for me when I have two columns (or rows):

with ui.row(wrap=False, align_items="center").classes('sortable'):
    ui.label("First")
    for i in range(10):
        with ui.card().classes('cursor-grab'):
            ui.label(f"{i}")

with ui.row(wrap=False, align_items="center").classes('sortable'):
    ui.label("Second")
    for i in range(10):
        with ui.card().classes('cursor-grab'):
            ui.label(f"{i}")

Do you have an idea why?

Furthermore, is it possible to move cards from one column to another? Basically what the Trello example does?

[itworkedlastime]

@HansBambel My guess is that querySelector in the JS picks the first element and returns it or it returns a list and the sortable function doesn't accept lists.

If you need two rows the link I posted above will do multiple sortable elements. It was written for columns but should be easy to adapt to rows. Here is the link:

#3830 (comment)

It also supports the "group" function of sortablejs so will allow you to drag from one list to the another one. In the example you'll see both columns are created with group='test'. This allows items to be dragged in between them. The issue I haven't solved yet is how to create an event that has the previous list and new list information in it. So I don't have a way to tell when an element is moved between lists.

Let me know if you need help implementing it.

[HansBambel]

@itworkedlastime Great! That worked better already!

I have an issue when my SortableRows are empty. Which is initially. Basically, I have one row where a card is created and I then want to assign them to other (yet) empty rows. Do you know why that is a problem?

[itworkedlastime]

@HansBambel It definitely still works when a sortable column is empty. I think the issue is that if the element is empty it collopse down very small. You could consider added a visible element to see where the column/row is. The following example worked using the code with sortable column class from before:

@ui.refreshable
def draw():
    ui.button('reset').on_click(refresh)
    with ui.row():
        with ui.column():
            with SortableColumn(on_change=on_change,group='test') as c1:
                for i in range(10):
                    with ui.card():
                        ui.label(f"Card {i}")
            ui.label(c1.id)

        with ui.column():
            with ui.card().classes('bg-gray-200'):
                with SortableColumn(on_change=on_change,group='test') as c2:
                    pass
            ui.label(c2.id)

draw()

ui.run()

[HansBambel]

@itworkedlastime You're right, it does. I will play around with making it more visible :)

I also made the classes more general:

class SortableElement(ui.element, component=ROOT_DIR / "resources" / "sortable_element.js"):
    """Sortable Row element"""

    def __init__(self, *args, group: str, on_change: Callable | None = None, **kwargs) -> None:
        super().__init__()
        self.on("item-drop", self.drop)
        self.on_change = on_change

        self._props["group"] = group

    def drop(self, e) -> None:
        """Run the on_change function."""
        if self.on_change:
            self.on_change(e)

    def makeSortable(self) -> None:
        self.run_method("makeSortable")

    def getitems(self) -> None:
        return self.run_method("getitems")


class SortableRow(SortableElement):
    """Sortable Row element."""

    def __init__(self, group: str, on_change: Callable | None = None, *args, **kwargs) -> None:
        super().__init__(*args, group=group, on_change=on_change, **kwargs)
        self._classes.append("nicegui-row")


class SortableColumn(SortableElement):
    """Sortable Column element."""

    def __init__(self, group: str, on_change: Callable | None = None, *args, **kwargs) -> None:
        super().__init__(*args, group=group, on_change=on_change, **kwargs)
        self._classes.append("nicegui-column")

Note that I made group mandatory. This could probably be optional.

[itworkedlastime]

Any thoughts for making this work with refreshable? I have a sortable list that can be updated by other parts of the page but when element is refreshed it deletes and redraws it. The above methods only turn it into a sortable element on content load

[itworkedlastime]

I created a sortable column that supports refresh.
#3830 (comment)