Search code examples
vue.jsvuedraggable

Vue on drag one player name , drags the whole list

I am using vue-draggable and trying to drag player name. It contains two draggabale list where it can drag items from one to another.

From the first list when I drag items, it drags only one player name and that's correct.

But when I drag items from second list, it drags as a whole group. If the second list contains two player name as San and Kim. When I drag Kim , it drags San at the same time. Is there a way to make this second list teamByTime2 to drag only one name at one time, like as first list dataList3?

I have uploaded array objects on JSFiddle code as well. This is how my array looks for first and second item list.

First List = datalist3 Second List = teamByTime2

Below is my code on JSFiddle

https://jsfiddle.net/ujjumaki/78vsbu3q/26/

Solution

  • All the list arrays need to have the same model. Said otherwise, dataList3 and Reservation_people need to contain the same kind of objects.

    If it's not the same as what you receive from the API then you'll have to transform the data model after fetching and before saving.

    Here is a working example: https://codesandbox.io/s/admiring-ptolemy-1yg9w?file=/src/App.vue:1227-1245