Vue2-dragula drag operation doesn't work

Ionic Framework Ionic Vue
1

Hello,

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

    image
    image1070×1144 42.9 KB

    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
    f2
    f21300×300 91.9 KB

  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">
              <ion-item>
                <ion-label>
                  {{ text }}
                </ion-label>
              </ion-item>
            </div>
          </ion-list>

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

f1
f11300×300 66.7 KB

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.

Thanks

2

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? https://ionicframework.com/docs/api/reorder

3

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

4

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

5

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: https://github.com/ClaudiaGiv/ionic-nuxt-drag/blob/1c3dead65d19b65fe3a534f08f863544c0ae02e8/pages/board.vue