Vue 可拖动移动到上一个列表

Question

我正在使用 vue js 可拖动插件

它在单个列表上运行良好，但我需要使用多个列表（如 Jira board）。我想将一张卡片（元素）从一个列表移动到另一个列表，但它应该适用于发布请求。如果我从服务器得到否定响应，那么我应该能够将其移回之前的状态。

到目前为止我所做的事情包括使用

：移动：

如果我必须直接拒绝移动而不使用ajax调用，它就可以工作。

@改变：

我无法使用此方法恢复。这实际上是我想合作的人。

Answer 1

对于任何遇到此问题的人：

更简单的解决方案是在卡片移动时存储所有列中所有卡片的初始顺序

start

，如果卡片移动后出现故障则恢复顺序。

<div v-for="(column, columnIndex) in columns" :key="columnIndex">
    <h2>{{ column.name }}</h2>
    <draggable
        :list="column.cards"
        group="cards"
        @start="saveInitialOrder"
        @change="move"
    >
        <template #item="{ element }">
            <div >{{ element.name }}</div>
        </template>
    </draggable>
</div>

// data:
columns: [
    { name: 'Column 1', cards: [{ id: 1, name: 'Card 1.1' }, { id: 2, name: 'Card 1.2' }] },
    { name: 'Column 2', cards: [{ id: 3, name: 'Card 2.1' }, { id: 4, name: 'Card 2.2' }] },
    { name: 'Column 3', cards: [{ id: 5, name: 'Card 3.1' }, { id: 6, name: 'Card 3.2' }] }
],
initialColumns: []

// methods
saveInitialOrder() {
    // Save the initial order of columns and cards
    this.initialColumns = JSON.parse(JSON.stringify(this.columns));
},
move() {
    // storing

    if (..storing failed..) {
        this.restoreInitialOrder();
    }
},
restoreInitialOrder() {
    // Restore the initial order of columns and cards
    this.columns = JSON.parse(JSON.stringify(this.initialColumns));
}