Thank you (@aurelie & @Quentin) for the great video! I followed all the steps and everything worked. Unfortunately the video ends earlier. Has there been any discussion of how to extend the code to save the new order? At the moment I can change the order of the items, but it then jumps back to the original and does not keep the new order. Do you can post the final example on github?
Thank you so much! Much Love to the whole WeWeb Team!
Hi,
you can find the final repository just here 
Do not hesitate if you have any question
(and sorry, the recording crashed just near the end, and we were unable to recover it)
Hey, when I use the component from the Github Repo you posted, Iām getting this error.
@aurelie would it be possible for you to look at the code snippet again and correct it? Iām also failing at a solution. 
I tried to add clone method from the official vuedraggable demos to my forked version, but that doesnāt work either. Seems like me and tilly are facing the same issue. It would be super cool to actually be able to have this working, as Iād use it right away in a project.
@aurelie could you at least guide us towards a solution?
Sorry, it was holidays time for me :). I just returned to the office, i will try to have a look this week !
Hey @aurelie, Iāve been trying to debug it today, and Iāve narrowed the issue to the usage of the data from WeWeb, when I switch data for a static array for example, it works.
data() {
return {
enabled: true,
dragging: false,
test: ["Quentin", "Joyce", "Aurelie"] <---- THIS WORKS
};
},
computed: {
draggingInfo() {
return this.dragging ? "under drag" : "";
},
things: {
get() {
return this.test
},
set(newValue) {
...
}
}
},
once I set it to anything WeWeb related, either to collectionData as you did it or just simple bound data from the Settings : {type: āArrayā} Property, Iām getting this.clone is not a function
data() {
return {
enabled: true,
dragging: false,
test: this.content.data <---- THIS DOESN'T WORK
};
},
computed: {
draggingInfo() {
return this.dragging ? "under drag" : "";
},
things: {
get() {
return this.test
},
set(newValue) {
...
}
}
},
Is it possible, that this might be caused by some updates on the WeWebās side?
I remember that they have an open bug on the library when we use too much slots and the transition effect. Can you try to remove the transition and see if you still have the problem?
It has something to do about how they calculate the list update interacting with the Transition element if i remember correctly.
They have two ways to update: directly update the array or an event. Updating directly the array will not work in weweb (or will break one day for some cases), and the bug is also only appearing if using custom update (maybe thats way you have a different result with a static array?)
Hmm, Iāve disabled the animation, but seems like it still doesnāt work. Iām considering using Sortable JS (Draggable is built on top of it) and then just changing the DB through custom emits at this point. In my usecase, I donāt really need the data (array) to change anyway, as Iām gonna be hitting the db on change - mostly between multiple draggables within the same group.
Updating the list is mainly for UX purpose (having instant feedback for the user when dropping)
Yeah, it would be nice to have an array updating, but seems like that is the key issue, I reproduced it now with Sortable JS and it works, just doesnāt update the array, but I might be able to work without it, as I said, Iām gonna be updating the collection with it and after each write Iāll have to fetch it anyway. Iām also considering maybe adding an array as output, which will be constantly computed, but Iām not sure how the updating of the array will work with WeWeb as it has been problematic to update the data so far.
PS: If u ever find some spare time, Iād love to know what is the issue with it, so we know what it was.
Can you elaborate more on this? Is it related to planned future changes on weweb side?
No, this is due to how we currently store and expose variables. You may result to update a local copy of the variable instead of the original, and so loose reactivity and sync. This is why is better to use our setter
Makes sense. Thanks
Hey @tillyboard I saw youāre hoping to see this happen could you tell me more about your use case? I might be able to drop the features with your needs in mind as well but I do not promise anything
Hey @Broberto,
That would be great! I havenāt been able to get into it for a long time yet and Iām happy to share my findings with the community.
I first need a very simple list that I can simply drag and drop. I also donāt need a realtime update from the database but would simply solve this with a button that updates the array.
You can find an example under āSimple list exampleā: SortableJS
Later I would like to have a grid. As an example a 5x5 tile grid which is then also populated by an array and can be moved by drag and drop. (as an example: āGrid Exampleā SortableJS )
I would be very happy if we find a solution together. I think we have a similar problem 
I have found a solution for myself for now and would like to share my solution with you. Actually I only needed the function of a draggable list and all array update functions I can also do with nocode at WeWeb. Also the update can be done easily in Weweb. The only problem was that when moving elements the new order was not saved. I solved the problem with a workflow, in which I simply update the array, which I previously stored in a variable with a workflow āOnListUpdateā. So the visible order is also āupdatedā. Finally I simply update my database via a button (I donāt need a live database update). Nevertheless I am still interested in your suggestions! Happy āno-ā Coding!
Hey Tilly, thatās great. Iām really happy that youāve been able to make this happen with nocode. Iāve been working on my own component for a while now, Iām just perfecting the bugs. Iām also doing multiple lists (5 for the morning, 5 for the afternoon, and one general where they drag from) and update them in realtime with Supabase, so I just went with a custom component, because I needed to be able to customize it 100%
Btw. do you still get the error in the console?
