VUE - vue draggable 不会拖回空列表列

Question

我目前正在使用 vue-draggable 功能开发一个项目管理应用程序，它允许我将任务拖到三个不同的阶段：ToDo、Progress 和 Completed。该功能部分有效；我可以将所有任务拖到不同的阶段，但我不能拖回空阶段。这里是 the codesandbox and picture. Am I missing something?

<template>
  <div>
    <v-row>
      <v-col>
        <draggable :list="todos" group="people" @change="log"></draggable>
      </v-col>
      <v-col>
        <draggable :list="progress" group="people" @change="log"></draggable>
      </v-col>
      <v-col>
        <draggable :list="completed" group="people" @change="log"></draggable>
      </v-col>
    </v-row>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  name: "two-lists",
  display: "Two Lists",
  order: 1,
  components: { draggable },
  data() {
    return {
      todos: [],
      progress: [],
      completed: [],
    };
  },
};
</script>

Answer 1

那是因为您还没有为您的可拖动对象设置任何 min-height。因此，当它们为空时，可拖动对象的活动区域会一直缩小。例如，如果将卡片拖到“待办事项”标题，您仍然可以移动卡片，但为了获得更好的用户体验，您应该至少为其设置一个最小高度，或者让它们使用所有可用高度，以便用户更容易把他们拖回去。

<draggable
   class="list-group"
   :list="todos"
   group="people"
   @change="log"
   style="min-height:400px"
>
   ...
</draggable>

VUE - vue draggable 不会拖回空列表列

VUE - vue draggable wont drag back into empty list column

vue.js

vuetify.js

vuedraggable