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

Question

我目前正在使用vue-draggable特性开发一个项目管理应用程序，它允许我将任务拖拽到三个不同的阶段：ToDo、和Completed。该特性部分工作；我可以将所有任务拖到不同的阶段，但不能拖回空阶段。这是密码箱和图片。我是不是遗漏了什么？

​

<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设置为可拖动的。因此，当它们空的时候，可拖的活动区域会一直缩小。例如，如果将卡片拖到“要做”的标题中，仍然可以移动它们，但是为了更好地使用UX，您应该至少设置一个最小的高度，或者让它们使用所有可用的高度，这样用户就更容易将它们拖回原来的位置。

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