Sortable list drag modifications

Ask us anything
1

Hey all,

I’ve been working on my reorder list and have come up against two limitations I can’t seem to get around:

  1. Select multiple items. This seems to be a feature of SortableJS but it’s not implemented in WeWeb? I’m already using a variable and can select multiple items by clicking them but if I drag them into another list only actual dragged item will “visually” move.

  2. The ability to disable HTML5 Drag and Drop API using the SortableJS forceFallback value.

image
image219×228 10.7 KB

In the image above you can see the dragging “cloned” item has the standard HTML5 Drag and Drop look. I can’t find anyway around this. I tried overwriting various SortableJS classes and used setDragImage() to make changes but no dice. I’d like the item to be lifted and moved exactly as it appears, so if anyone knows how to accomplish that some other way please let me know!

2

The only way of achieving this is by using the Fork functionality of the existing component and editing it either manually, maybe even with some help of ChatGPT, or via the WeWeb’s AI (the first option will probably get you faster and cheaper to your goal). Nontheless, there is no other way to do this, other way.

3

I got forceFallback functioning by forking and adding one line:

    <draggable
        v-model="internalItems"
        :item-key="itemKey"
        :clone="(el) => el"
        :group="group"
        :sort="sortable"
        :handle="handle?.length ? `.${handle}` : null"
        :disabled="isEditing || isReadonly"
        force-fallback="true" <----- Added line
        @change="onChange"
        @start="setDrag(true)"
        @end="setDrag(false)"
    >

No such luck with multidrag. After lots of trial and error the closest I have come is this solution someone says works but I’m not exactly sure how to implement that in my fork.

1 Like
4

I think the guy in the linked comment is initiating the Draggable not via the library WeWeb uses, which is the vuedraggable, and instead seems to use the native draggable library to initiate the whole thing. This would probably require you to rewrite more stuff than just changing some props though. But I’m not sure, not enough context.

Also, you’re linking to vue.draggable.next, which is apparently a different thing from what WeWeb uses. You can always sort of guess which package is used in the component by looking at the package.json, which in your case seems to list only one dependency - the library you should be looking at.

5

I assumed WeWeb was using vue.draggable.next because it is Vue 3 and has a release matching the version number.

I then assumed the reason I couldn’t enable it was because it is not included/mounted in every build of SortableJS.

image
image936×302 23.7 KB

The link in my previous post made it look like the solution required mounting the plugin.

I stopped looking into it because I don’t know enough to confirm the above let alone get it working. I could be wrong about everything. Multidrag isn’t super necessary for my app but I appreciate any insight!