我如何使用 Vue Draggable 添加确认弹出模式？

Question

我有一个使用 Vue Draggable 的 vue 组件。

<template>
  <div class="row my-5">
    <div v-for="column in columns" :key="column.title" class="col">
      <p class="font-weight-bold text-uppercase">{{column.title}}</p>
      <!-- Draggable component comes from vuedraggable. It provides drag & drop functionality -->
      <draggable :list="column.tasks" :animation="200" ghost-class="ghost-card" group="tasks" :move="checkMove">
        <transition-group>        
          <task-card
            v-for="(task) in column.tasks"
            :key="task.id"
            :task="task"
            class="mt-3 cursor-move"
          ></task-card>
          <!-- </transition-group> -->
        </transition-group>
      </draggable>
    </div>
  </div>
</template>


<script>
import draggable from "vuedraggable";
import TaskCard from "../board/TaskCard";
export default {
  name: "App",
  components: {
    TaskCard,
    draggable,
  },
 data() {
    return {
      columns: [
                 .....
             ],
    };
  },
  methods: {
   checkMove: function(evt){   
    console.log('moved');
}
  },
};
</script>

在 TaskCard 组件中 -

<template>
  <div class="bg-white shadow rounded p-3 border border-white">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h2>{{task.id}}</h2>
      <span>{{task.date}}</span>
    </div>
    <p class="font-weight-bold">{{task.title}}</p>
  </div>
</template>
<script>
export default {
  props: {
    task: {
      type: Object,
      default: () => ({}),
    },
  },
};
</script>

当我移动一个项目时，我想要一个确认更改然后才移动项目的模式。（即，如果我单击模式内的取消按钮，则不应移动该项目。）

如何使用提供的 checkMove() 函数实现这一点？

Answer 1

我认为您无法通过使用 onMove 事件来实现此目的。 onEnd 事件似乎更合适，但不幸的是它没有任何取消掉落功能。

所以我认为这里唯一的解决方案是在用户决定取消时将其还原。

您可以监听 change 事件（在 documentation 中查看更多信息）

<draggable
  group="tasks"
  v-model="column.tasks"
  @change="handleChange($event, column.tasks)">
  ...
</draggable>
...
<button @click="revertChanges">Cancel</button>
<button @click="clearChanges">Yes</button>

和

...
  handleChange(event, list) {
    this.changes.push({ event, list })
    this.modal = true
  },

  clearChanges() {
    this.changes = []
    this.modal = false
  },

  revertChanges() {
    this.changes.forEach(({ event, list }) => {
      if (event.added) {
        let { newIndex } = event.added
        list.splice(newIndex, 1)
      }

      if (event.removed) {
        let { oldIndex, element } = event.removed
        list.splice(oldIndex, 0, element)
      }

      if (event.moved) {
        let { newIndex, oldIndex, element } = event.moved
        list[newIndex] = list[oldIndex]
        list[oldIndex] = element
      }
    })

    this.changes = []
    this.modal = false
  }
...

JSFiddle example

我如何使用 Vue Draggable 添加确认弹出模式？

How can i add a confirmation Pop up modal with Vue Draggable?

vue.js

vuedraggable