我目前正在使用 vue-draggable 功能開發一個專案管理應用程式，它允許我將任務拖入三個不同的階段：ToDo、Progress 和 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>
uj5u.com熱心網友回復：
那是因為你沒有min-height為你的可拖動物件設定任何內容。因此，當它們為空時，可拖動的活動區域會一直向下收縮。例如，如果將卡片拖動到“待辦事項”標題，您仍然可以移動卡片，但為了獲得更好的用戶體驗，您應該至少為其設定一個最小高度或讓它們使用所有可用高度，以便用戶更容易把他們拖回來。
<draggable
class="list-group"
:list="todos"
group="people"
@change="log"
style="min-height:400px"
>
...
</draggable>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/480684.html
標籤：Vue.js Vuetify.js vuedraggable
下一篇：如何匯入依賴項的.vue檔案