Draggable list stops working on refresh

[itworkedlastime]

Question

I used this discussion to create a draggable list of ui.cards() Better support for drag&drop

This works well but the isssue is that there are other parts of the code that can update the order of the list and when I call refresh() the sortable JS code stops working.

Here is some example code that shows the issue

from nicegui import context, ui

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

def drop(event):
	print(event.args)
	draw.refresh()

ui.on('item-drop', drop)

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>
''')

draw()

ui.run()

[lokhman]

I suspect it's because on refresh DOM is being rebuilt again and the binding to your previous list element is broken. You need to recreate Sortable again after every refresh.

[itworkedlastime]

Yes I agree. Unfortunately my JavaScript is horrible. The two ideas I have had so far are:

1. Create a class that inherits from ui.columun or ui.row and then uses ui.run_javascript() to call sortable on being created. The issue I'm running into with this is that run_javascript must be run in an async function so figuring out where to put it while also creating a sane interface/api is difficult
2. Don't use DOMcontentloaded as the trigger. I thought about creating a custom event but I don't think there is a way to trigger a custom event in nicegui
3. I guess learn JavaScript?

[mtanwei]

I also do notice that we need to re-add 'item-drop' events, but the 'item-drop' event gets emitted multiple times because of re-creating the Sortable.

class SortableColumn(ui.column):

    def __init__(self, on_drop: Callable[..., None]):
         super().__init__()
         self.classes("sortable")
         self.on_drop = on_drop
         self.run_javascript_create_sortable()

    def move_card(self, event: GenericEventArguments) -> None:
        # do something
        self.on_drop(event)

    def run_javascript_create_sortable(self) -> None:
        ev_dict = context.client.layout._event_listeners
        ev_str = helpers.kebab_to_camel_case("item-drop")
        for k in [k for k, listener in ev_dict.items() if listener.type == ev_str]:
            # NOTE: remove 'itemDrop' event listeners
            ev_dict.pop(k)
        # NOTE: This is javascript code to create `Sortable`.
        ui.run_javascript("""
            function setupSortable() {
                import('https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js').then(() => {
                    Sortable.create(document.querySelector('.sortable'), {
                        animation: 150,
                        ghostClass: 'opacity-50',
                        onEnd: (evt) => emitEvent(
                            "item-drop",
                            {
                                id: parseInt(evt.item.id.slice(1)),
                                old_index: evt.oldIndex,  // previous location
                                new_index: evt.newIndex,  // new location
                            }
                        ),
                    });
                });
            }
            setupSortable();""")
        ui.on("item-drop", self.move_card)

[itworkedlastime]

Ok, after looking through the examples I was able to make a working Sortable Column that also supports ui.refreshable and doesn't do anything to hacky. It also supports the 'group' function of sortable allowing you to have multiple list that you can drag inbetween. The only issue is that I can't get an event that has both the new list id and old list id so there isn't a way to tell where the dragged item went.

from typing import Callable, Optional
from nicegui import ui

class SortableColumn(ui.element, component='sortable_column.js'):

    def __init__(self, *, on_change: Optional[Callable] = None, group:str = None) -> None:
        super().__init__()
        self.on('item-drop', self.drop)
        self.on_change = on_change

        self._classes.append('nicegui-column')
        self._props['group'] = group

    def drop(self, e) -> None:
        if self.on_change:
            self.on_change(e)
        else:
            print(e)

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

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

def on_change(e):
    print(e)

def refresh():
    draw.refresh()

@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 SortableColumn(on_change=on_change,group='test') as c2:
                for i in range(10):
                    with ui.card():
                        ui.label(f"Card {i*10}")
            ui.label(c2.id)

draw()


ui.run()

then the js code in sortable_column.js

import 'https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js'

export default {
  template: `
    <div>
      <slot></slot>
    </div>
  `,
  props: {
    group: String,
  },
  mounted() {
    this.makesortable();
  },
  methods: {
    makesortable() {
      if (this.group === 'None') {
      this.group = this.$el.id;
      }
      Sortable.create(this.$el, {
      group: this.group,
      animation: 150,
      ghostClass: 'opacity-50',
      onEnd: (evt) => this.$emit("item-drop", {
        parent: parseInt(this.$el.id.slice(1)),
        id: parseInt(evt.item.id.slice(1)),
        new_index: evt.newIndex,
        new_list: evt.to,
        old_list: evt.from,
        event: evt,
      }),
      });
    },
  },
};

Link to a repo with this example: https://github.com/itworkedlastime/nicegui-sortable-column