关于列更改的 VueDraggable 看板任务未返回正确的列索引

问题描述

我正在使用 Vue 3、VueDraggable 和 Inertia.js 构建看板。列和列任务都是可排序的，想法是您可以在任何列中拖放任何任务。您可以拖动列并按任意顺序放置它们。

话虽如此。这是我的任务可拖动组件

                            <draggable 
                            :list="column.tasks" 
                            group="tasks" 
                            class="flex flex-col flex-1"
                            ghost-class="draggable-ghost"
                            :move="checkmove"
                            @change="onTaskSortChanged(column.id)"
                            item-key="id">
                            
                                <template #item="{element}">
                                    <task-card :key="element.id"
                                    :task="element"
                                    @click="$emit('task-click',element)">
                                    </task-card>
                                </template>

                            </draggable>
                            

如果我想在列中向上或向下放置一个任务，这可行，但是要将任务拖放到另一列中，我将一个操作设置为更改事件，但是，这会返回新列索引和同时分别上一列索引。

事件监听器

        onTaskSortChanged(column){
            console.log(column)
        },

示例：

56    app.js:18099 
55    app.js:18099 

我也尝试过 @end 事件，但这会在拖动任务之前返回上一个列索引。

有什么可能的解决方案吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）