Draggable vuetify objects

[resammc]

Hello,

I was wondering if there is a way to use Vue Draggable in trame? I know about the Float Card, but what I want to achieve is to change the order of the items (in this case, VCard objects) inside a group.

Something like this example:
https://codepen.io/chansv/pen/zYvOYyd?editors=1010
(source: https://stackoverflow.com/questions/61083916/vue-draggable-to-follow-v-chip-group-selection)

Thank you and best regards,

Resam

[jourdain]

You can do something like that.

[resammc]

Thanks a lot for the hint. I followed the code and came up with this sample code:

from trame.app import get_server
from trame.ui.html import DivLayout
from trame.widgets import vuetify3 as vuetify, html, helper
from trame.decorators import TrameApp, change, controller, trigger

server = get_server(client_type="vue3")
state = server.state
controller = server.controller

# external module for Vue Draggable
# https://github.com/SortableJS/vue.draggable.next
draggable_module = dict(
    scripts=[
        "https://cdn.jsdelivr.net/npm/sortablejs@1.10.2/Sortable.min.js",
        "https://cdn.jsdelivr.net/npm/vuedraggable@next/dist/vuedraggable.umd.min.js"
    ],
    vue_use=["vuedraggable"],
)

# helper class
Draggable = helper.create_class(
    "Draggable",
    "draggable",
    module=draggable_module,
    properties=["group", "animation"],
    # events=["start", "end"],
    events=["start", "add", "remove", "update", "end", "choose", "unchoose", "sort", "filter", "clone"], # edited to add all events
)

state.tags = [
    {"name": "Shoping"},
    {"name": "Art"},
    {"name": "Tech"},
    {"name": "Creative Writing"},
]
state.selection = None

@controller.add("dragStart")
def drag_start(**kwargs):
    print("dragging starts")

# layout
with DivLayout(server) as layout:
    with vuetify.VApp():
        with vuetify.VContainer(classes="pa-4"):
            with vuetify.VCard(max_width=400, classes="mx-auto"):
                with vuetify.VChipGroup(v_model=("selection",), column=True, active_class="primary--text"):
                    with Draggable(v_model=("tags",), group="tags", animation=200, start=controller.dragStart) as drag:
                            with vuetify.VChip(v_for="(tag, i) in tags", key="i", draggable=True, click=controller.dragStart):
                                vuetify.VCardText("{{ tag.name }}")
                            print(drag.html)

server.start()

But when I try to move the chips, the start event does not get triggered (according to https://github.com/SortableJS/vue.draggable.next it is one of the supported events - also tried onStart with no success).
(also, of course, the dragging is not working)

Am I missing something here?

[resammc]

An update from my side:

It seems like if I add all the possible events to the class, and switch to vue2, then things work as expected:

from trame.app import get_server
from trame.ui.html import DivLayout
from trame.widgets import vuetify as vuetify, html, helper
from trame.decorators import TrameApp, change, controller, trigger

server = get_server(client_type="vue2")

state = server.state
controller = server.controller

draggable_module = dict(
    scripts=[
        "https://cdn.jsdelivr.net/npm/sortablejs@1.10.2/Sortable.min.js",
        "https://cdn.jsdelivr.net/npm/vuedraggable@2.24.3/dist/vuedraggable.umd.min.js"
    ],
    vue_use=["vuedraggable"],
)

# helper class
Draggable = helper.create_class(
    "Draggable",
    "draggable",
    module=draggable_module,
    properties=["group", "animation"],
    events=["start", "add", "remove", "update", "end", "choose", "unchoose", "sort", "filter", "clone"],
)

# Define initial state for your draggable cards
state.tags = [
    {"name": "Shoping"},
    {"name": "Art"},
    {"name": "Tech"},
    {"name": "Creative Writing"},
]
state.selection = None

@controller.add("dragStart")
def drag_start(**kwargs):
    print("dragging starts")

# layout
with DivLayout(server) as layout:
    with vuetify.VApp():
        with vuetify.VContainer(classes="pa-4"):
            # with vuetify.VCard(max_width=400, classes="mx-auto"):
                with vuetify.VChipGroup(v_model=("selection",), column=True, active_class="primary--text"):
                    with Draggable(v_model=("tags",), group="tags", animation=200, start=controller.dragStart) as drag:
                            with vuetify.VChip(v_for="(tag, i) in tags", key="i", draggable=True, click=controller.dragStart):
                                vuetify.VCardText("{{ tag.name }}")
                            print(drag.html)

server.start()

But this won't work for Vue3 and the vue.draggable.next which should be compatible with vue3 also does not work...

[jourdain]

Are you using those urls?

//cdn.jsdelivr.net/npm/sortablejs@1.10.2/Sortable.min.js
//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/4.0.0/vuedraggable.umd.min.js

[resammc]

I use

//cdn.jsdelivr.net/npm/sortablejs@1.10.2/Sortable.min.js

for Sortable JS. For the vuedraggable, the link does not exist anymore, see SortableJS/vue.draggable.next#64
therein, it is suggested to use

https://www.unpkg.com/vuedraggable@4.1.0/dist/vuedraggable.umd.js

but I get a CORP error in the console when I use it:

The FetchEvent for "https://www.unpkg.com/vuedraggable@4.1.0/dist/vuedraggable.umd.js" resulted in a network error response: Cross-Origin-Resource-Policy prevented from serving the response to the client.

so, instead I'm using
https://cdn.jsdelivr.net/npm/vuedraggable@4.1.0/dist/vuedraggable.umd.min.js

which is identical to the unpkg one.

I don't get any errors in the console now, but still I cannot drag the chips.

[jourdain]

If you need us to investigate more, feel free to reach out for support.

[resammc]

Actually we will have an upcoming project with Kitware, but I think it is a good opportunity for me to understand what is happening in the background, so I'm eager on trying to find out the solution myself.

Is it possible for you to give me a hint on where you think the problem lies?

So far, I have a suspicion that even in the "Quasar" example (https://github.com/Kitware/trame/blob/master/examples/validation/core/33_outside_lib.py) things are not completely Vue3. That is, I see Vue.use(...) in the console when I run the example and I think this is not so correct (vue.use should not work with vue3 as far as I understood). Or maybe it is trame-related to see vue.use in Vuetify3 codes?
(Edit: or perhaps it's just because of these lines https://github.com/Kitware/trame-client/blob/13d28074e95db6901d0a13957eaff60ceb2a159f/vue3-app/src/main.js#L114C3-L114C9 , but still sort of interesting that I see Vue.use([object Object]) for vue3, but not the real name of the component)

At the moment I think it maybe the case that the helper.create_class() only works for vue2 (but I'm not sure) and my only possibility is to create my own component out of vuedraggable.

I'd appreciate your thoughts on this. Thanks :)

[Justineantoine]

Hi !
I've taken a look at your problem, it seems like the vue.draggable.next lib only exposes the component and does not install it. Thus, you need to create a js file that performs the installation and provide it in your module scripts :)
They're some breaking changes on how to use the draggable component between vue2 and vue3. The item slot must be used rather than a v-for and an item-key must be provided (cf. vue.draggable.next README)

from trame.app import get_server
from trame.ui.html import DivLayout
from pathlib import Path
from trame.widgets import vuetify3 as vuetify, helper

server = get_server(client_type="vue3")
state = server.state
controller = server.controller

## Create a js file xxx.js containing
#  window.trame_vuedraggable = {
#     install(app) {
#         app.component("draggable", window.vuedraggable);
#       }
# }

SCRIPT_PATH = Path("your/path/xxx.js") # FIX ME
draggable_module = dict(
    serve= {"__trame_vuedraggable": str(SCRIPT_PATH.parent.absolute())},
    scripts=[
        "https://cdn.jsdelivr.net/npm/sortablejs@1.10.2/Sortable.min.js",
        "https://cdn.jsdelivr.net/npm/vuedraggable@next/dist/vuedraggable.umd.min.js",
        "__trame_vuedraggable/xxx.js", # FIX ME
    ],
    vue_use=["trame_vuedraggable"]
)


# helper class
Draggable = helper.create_class(
    "Draggable",
    "draggable",
    module=draggable_module,
    properties=["item_key"]
)

state.tags = [
    {"id": "0", "name": "Shopping"},
    {"id": "1", "name": "Art"},
    {"id": "2", "name": "Tech"},
    {"id": "3", "name": "Creative Writing"},
]
state.count = 0

# layout
with DivLayout(server) as layout:
    with vuetify.VApp():
        with vuetify.VContainer(classes="pa-4"):
            with vuetify.VCard(max_width=400, classes="mx-auto"):
                with Draggable(v_model=("tags",), item_key="id") as drag:
                    with vuetify.Template(
                        v_slot_item="{element}",
                        __properties= [("v_slot_items", "v-slot:items")]
                    ):
                        with vuetify.VCard(key="element.id"):
                            vuetify.VCardText("{{ element.name }}")

server.start()

[resammc]

Hi @Justineantoine. Thanks a lot for taking the time. It now works :)

[Justineantoine]

FYI, I made a working example here