Vue3 (vue-dndrop 1.2.11) - Draggable elements only drag once, then stops

[amendx]

Vue3 (vue-dndrop 1.2.11) - Draggable elements only drag once, then stops

[JonesMuc]

Hey, I had exactly the same error after a new install of the project. It seems that there is a problem with newer versions.
After changing back to exactly vue-dndrop version 1.2.0 it was working again. (you have to remove the ^ in front of the version number in the package.json and do a npm install again)

I also changed the versions of vue and vue-template-compiler in my project but i'm not sure if this is important too. they are now both on version 2.6.14.
Hope this helps

[amendx]

We'll be taking a look at it today @JonesMuc @kamil-bartczak

[joerattz]

We'll be taking a look at it today @JonesMuc @kamil-bartczak

Any progress on that?

[uptimerkgb]

I have the same error to. (Version vue-dndrop 1.2.11)
As a temporary solution, I executed the command:
npm i [email protected]

[amendx]

@uptimerkgb @joerattz @kamil-bartczak go to vue-dndrop 1.2.13 and see if problem's solved :)

Check #58 for version suited for vue2

[pbs-websuntangled]

End October and this is still not working on pixel 6 - Any update?

Downgrading to 1.2.2 fixes but does not fill me with confidence

[amendx]

@pbs-websuntangled will take a look at it.

[uptimerkgb]

@pbs-websuntangled will take a look at it.

I am using 1.2.13 and DnD is working fine.
(аpologize for not writing about this earlier :)

[pbs-websuntangled]

I switched to 1.2.13

npm list vue-dndrop
[email protected] C:\development\flask_vue\front_end
└── [email protected]

This is my version of Vue
npm list vue
[email protected] C:\development\flask_vue\front_end
├─┬ @vitejs/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└─┬ [email protected]
└─┬ @vue/[email protected]
└── [email protected] deduped

I copied this simplest example from the docs: https://amendx.github.io/vue-dndrop/examples/simple-tagless.html
(see file contents at end)

In the chrome browser on my desktop, it works completely fine

In the chrome browser on my Pixel 6, I can drag 1 item and then it stops

However, when I visit the page ( https://amendx.github.io/vue-dndrop/examples/simple-tagless.html) on my pixel 6, it works fine so it seems to indicate an environmental problem

I am relatively new to Vue so it's possible I have made some mistake

My code below. There seems to be an html filter so I removed the opening less than symbol from all of the tags

template>
div class="simple-page">
Container
:get-ghost-parent="getGhostParent"
:get-child-payload="getChildPayload"
remove-on-drop-out
@drop="onDrop"
@drop-ready="onDropReady"
@drop-not-allowed="dropNotAllowed"
>
Draggable v-for="item in items" :key="item.id">
{{ item.data }}
/Draggable>
/Container>
/div>
/template>

<script> import { Container, Draggable } from "vue-dndrop"; import { applyDrag, generateItems } from "../utils/helpers"; export default { name: "SimpleTagless", components: { Container, Draggable }, data() { return { items: generateItems(10, (i) => ({ id: i, data: "Draggable " + i })), }; }, methods: { onDrop(dropResult) { console.log("drop result ", dropResult); this.items = applyDrag(this.items, dropResult); }, getGhostParent() { return document.body; }, onDropReady(dropResult) { console.log("drop ready", dropResult); }, dropNotAllowed({ payload, container }) { console.log("drop not allowed"); }, getChildPayload(index) { return this.items[index]; }, }, }; </script>

[uptimerkgb]

I tested version 1.2.13 on Android (Opera, Mi Browser) - the problem persists.
Under Windows (Firefox) version 1.2.13 working fine.