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

[kamil-bartczak]

Problem and description

The first time you drag and drop an item, the drag and drop works fine, but after that it is impossible to move any item.

Stack and versions

I used the same code from issue: : #58 (comment)
I also used the code from various examples and the same problem occurred

From my debugging, it seems that the Container drop function doesn't even fire the second and more times

[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.