Vue2-dragula drag operation doesn't work


I am using vue2-dragula library in a nuxt project with ionic framework integrated in.
I have 2 scenarios in which vue-dragula doesn’t work as expected:

  1. I am using dragula on ion-items inside a ion-list

    and the drop doesn’t work meaning that the effect of dragging works but at drop the cancel event is emitted like in the gif below

  2. I am using dragula on ion-items that are inside a div before inside the ion-list

<ion-list v-dragula="tasks1" service="effects">
            <div v-for="text of tasks1" :key="text">
                  {{ text }}

and the drop works but the effect of dragging is wrong like in the gif below

Does anyone know why the drag and drop doesn’t work on ion ion-items inside vue projects only when are put in html elements and even than the dragging effect is bad? Because I saw many example in angular where the drag and drop works for ion elements.


Hard to say what the issue is without being able to reproduce it myself. Can you provide a GitHub repo? Also, have you looked at the ion-reorder component?

Also I would make sure that vue2-dragula is compatible with Vue 3.

Hi @ldebeasi I tested vue2-dragula in a newly created vue3 project and you are right, it does not work witj vue 3 :frowning:
Can you recommend me a dran’n’drop library that works with ionic-vue3 for a mobile web app (because HTML drag and drop API for eg doesn’t work on mobile browsers) ?

Hi @ldebeasi I tried ionic reorder group but it only has the ability to reorder items inside the same list (ion-reorder-group). I want to drag items from a list and drop them inside another list and those lists to be on separate columns (or at least to be on the same list but to be able to separate the list on separate columns which I tried with no success)
Link to github repo: