Question

我对Vue.js和vue-draggable组件很陌生，我真的可以在构建类似Trello的组件方面使用一些帮助。因此，我正在尝试构建一个组件，使人们可以将个人技能从第一个列表中拖出并拖到其他四个列表中。这四个列表中的每一个都代表着另一层次的知识（基础知识，高级知识，专业知识，专家知识）。另外，我使用vue材料，将其与vue可拖动结合使用可能会遇到问题。

我已经看过这个问题Vue Draggable - Multiple Lists，但是在我看来主要的区别是，我使用嵌套结构来列出可用技能。另外，我不仅使用普通的HTML元素，还使用了vue材料以使列表看起来很漂亮，并带有指示特定主题的部分。我在哪里错过了一项重要的工作？我是否需要自己为所有列表实施所有更改处理，还是仅通过使用v-model就可以解决？

<template>
    <div>

        <md-card class="md-layout-item">
            <md-card-header>
                <div class="md-title">Fähigkeiten</div>
            </md-card-header>

            <md-card-content>
                <div class="md-layout">
                    <div class="md-layout-item md-size-35 column" name="available-skills" id="available-skills">
                        <md-subheader>Fähigkeiten</md-subheader>

                        <md-list md-expand v-for="(section, index) in availableSkills">
                                <md-list-item md-expand>
                                    <span class="md-list-item-text">{{section.sectionName}}</span>

                                    <md-list slot="md-expand">
                                        <draggable v-model="section.skills" id="availableSkills" class="dragArea" :options="{group: 'skills'}">
                                            <md-list-item v-for="(skill, index) in section.skills" :key="skill.id" :index="index"
                                                          @start="drag=true" @end="drag=false">
                                                            {{skill.name}}
                                            </md-list-item>
                                        </draggable>
                                    </md-list>

                                </md-list-item>
                        </md-list>

                    </div>
                    <div class="md-layout-item md-size-15 column" name="basic-skills" id="basic-skills">
                        <md-list>
                            <md-subheader>●○○○</md-subheader>
                            <draggable v-model="basicSkills" id="basicSkills" class="dragArea" :options="{group: 'skills'}">
                                <md-list-item v-for="(skill, index) in basicSkills">{{skill.name}}</md-list-item>
                            </draggable>
                        </md-list>
                    </div>
                    <div class="md-layout-item md-size-15 column" name="advanced-skills" id="advanced-skills">
                        <md-list>
                            <md-subheader>●●○○</md-subheader>
                        </md-list>
                    </div>
                    <!-- ... other similar lists -->
                </div>

            </md-card-content>

        </md-card>

    </div>
</template>

<script>
    import draggable from 'vuedraggable';

    export default {
        name: 'Skills',
        components: {draggable},
        mixins: [],
        data: () => ({
            skillsSaved: false,
            sending: false,
            basicSkills: [],
            advancedSkills: [],
            professionalSkills: [],
            expertSkills: [],
            availableSkills: [{
                sectionName: 'Methodik',
                skills: [
                    {
                        name: 'Scrum',
                        id: 0,
                    },
                    {
                        name: 'Wasserfall',
                        id: 1,
                    },
                    {
                        name: 'Kanban',
                        id: 2,
                    }
                ]
            },
                {
                    sectionName: 'Programmiersprachen',
                    skills: [
                        {
                            name: 'Kuba',
                            id: 10,
                        },
                        {
                            name: 'C Stumpf',
                            id: 11,
                        },
                        {
                            name: 'C--',
                            id: 12,
                        }
                    ]
                }],
        }),
        methods: {
        },
    };
</script>

<style lang="scss" scoped>
    .column {
        border: lightgrey solid 1px;
    }

    .dragArea {
        background-color: lightblue;
    }

</style>

当前，我可以将元素拖出第一个列表。但是，一旦我进入第二个列表（基本知识），就什么也没有发生。我希望该元素从可用技能列表中删除，并添加到其他列表中。同样，通过拖放列表来抑制手动排序也很棒。

任何提示都非常欢迎。预先感谢。

Vue.js：如何使用Vue材质创建支持多个目标列表的可拖动列表项

0 个答案: