Vue 可拖拽进出

Question

我有一组对象。每个对象都包含一个对象数组。

例如：

wishlists: [
    {
        name: 'wishlist 1',
        id: '123',
        items: [
            {
                image: "foobar.jpg",
                name: "warlock",
                quantity: 1
            },
            {
                image: "foobar1.jpg",
                name: "warlock1",
                quantity: 2
            }
        ]
    },
    {
        name: 'wishlist 2',
        id: '1422',
        items: [
            {
                image: "foobar.jpg",
                name: "warlock",
                quantity: 7
            },
            {
                image: "foobar1.jpg",
                name: "warlock1",
                quantity: 2
            }
        ]
    }
]

我在循环中使用 vue draggable 来呈现每个列表。

 <div v-for="(list, index) in wishlists">
     <draggable v-model="list.items" :key="list._id" :options="{group:'wishes'}" class="dropZone" @change="checkMove">
</div>

我的 checkMove 方法只是记录更改事件。

{added: {…}}
added:
element:
image: "foobar.jpg"
name: "Warlock"
quantity: 1
 ...
newIndex: 0
 ...
{removed: {…}}
removed: {element: {…}, oldIndex: 0}
 ...
{moved: {…}}
moved: {element: {…}, oldIndex: 1, newIndex: 0}

我需要在每次操作时触发 POST。我不想在每个事件中都将整个根愿望列表数组发送回服务器，因为那太疯狂了！我只需要POST有什么变化。

通过@change 事件，我看到我能够获取已移动的对象 - 以及它的 oldIndex 位置（在旧列表中）和它的 newIndex 位置（在新列表中）。但是，我没有被告知有关列表的任何信息。我需要知道它来自哪个列表，以及它落在哪个列表上。

有什么办法可以得到这些信息吗？如果我可以获得心愿单的 ID 以及 newIndex 和 oldIndex 等 - 那么我可以 post 将此信息返回到服务器，并更新数据库...

我玩过每一个项目，看起来没有提供任何关于列表的信息。

Answer 1

<draggable v-model="list.items" :key="list._id" :options="{group:'wishes'}" ... @end="checkMove">

@end 给了我列表，从列表，oldIndex，newIndex ... ugghhh ... 我确定我试过了。它没有给我项目 - 但我有索引，所以我只是用它来按索引引用。

Vue 可拖拽进出

Vue Draggable to and from

rubaxa-sortable

vue-component

vuejs2