search

bevacqua / dragula

:ok_hand: Drag and drop so simple it hurts
https://bevacqua.github.io/dragula/
MIT License
21.89k stars 1.97k forks source link

When using to reorder some elements in a grid, occasionally they will duplicate on release #573

Open GeoHeard opened 5 years ago

GeoHeard commented 5 years ago

When I drag an element to reorder it, it will sometimes duplicate itself or other elements in the same grid. They will disappear on refresh but cause confusion. It is possible to replicate this many times.

They are part of a grid that is produced via an ng-repeat using angular.

mostafaebrahimi commented 5 years ago

can you provide a JSFiddle or some code example ?

phaberest commented 5 years ago

I'm afraid it's happening the same to me. It seems like the reactive array adds the element updated and Dragula adds just the dom element with the old data.

It's a bit complicated to provide a fiddle as I have it splitted in several vue components.

mostafaebrahimi commented 5 years ago

@phaberest Please provide fiddle to check.I don't have any idea how problem occurs

clekstro commented 4 years ago

I don't have a fiddle handy, but I can describe what I think is the issue at a higher level.

Imagine a project board in an issue tracker where cards can be moved in between columns. This works flawlessly when you have static data, as you're simply moving dom elements around.

Then, you attempt to integrate this within your JS app using your framework of choice, rendering list items via some sort of looping mechanism that references state within in your app. The first render works fine. You see the expected cards in their respective lists and can drag an element from one list to another.

Now, this is where the trouble starts. You likely want to persist this change in some way, so you hook into a drop event to make a request to your backend or in some way update the app state's collection that's being iterated over. The moment you drop the card, you have a disconnect: the card is immediately present in the column -- but not in the collection that's being iterated. Assume your update succeeded: the card is added to that collection, your framework renders an additional card. Now you have two.

I don't think this is a problem with this package per se; it's a problem with allowing your UI to deviate from the state of your application.

gangeswaran commented 7 months ago

Shiptivitas and 3 more pages - Personal - Microsoft​ Edge 03-12-2023 21_47_15 Shiptivitas and 3 more pages - Personal - Microsoft​ Edge 03-12-2023 21_47_18

The react tells to check the version The card is getting duplicated while dropping the card