Vue.Draggable 拖放到同一个数组答案

【问题标题】：Vue.Draggable Drag and drop to same arrayVue.Draggable 拖放到同一个数组
【发布时间】：2019-02-01 13:24:30
【问题描述】：

我正在尝试将相同的数组拖到数组中，请检查我的代码，并告诉我哪里做错了。工作了将近 10 个小时，但没有找到任何解决方案。感谢您的帮助。

    <draggable v-model="userSkillLevel3"
                           :options="{group:'people',animation:150,filter: '.ignore-elements',preventOnFilter: true,dragClass:'sortable-chosen',handle: '.sortable-chosen',chosenClass:'sortable-chosen',ghostClass: 'sortable-ghost'}"
                           @change="sortSkill($event,userSkillLevel2)">
                    <div class="sortable-ghost">
                        <div class="ignore_element">
                            <input id="entry_level2" type="radio" name="expertlevel" value="2" v-on:click="updateSkillLevel(2)">
                            <label for="entry_level2"><span>$</span> Expert</label>
                        </div>

                        <div class="resultshow ">
                            <draggable v-model="userSkillLevel3"
                                       :options="{group:'people',animation:150}"  >
                                <ul v-for="(userSkillLevel,index) in userSkillLevel3" :key="index" class="">
                                    <li class=" sortable-chosen"><span class="">{{userSkillLevel.name}} <i v-on:click="clearCurrentSkillLevel(''+userSkillLevel.code+'')" class="fa fa-close"></i></span></li>
                                </ul>
                            </draggable>
                        </div>
                    </div>

                </draggable>

【问题讨论】：

标签： vue.js drag-and-drop drag vue.draggable

【解决方案1】：

我认为问题在于您不应该复制您的可拖动项目。更糟糕的是，您对它们使用相同的 v-model 属性，因为模型会像这样混乱。您应该使用一个可拖动项目而不指定拉取和放置选项，因为您的代码暗示您不想让项目从数组中拉出。如果你查看插件的GitHub，你可以看到最基本的例子是拖放到同一个数组中：

https://github.com/SortableJS/Vue.Draggable

【讨论】：

感谢您的回复，请再次检查我的代码并更新为新代码。请让我知道你的想法。
抱歉，可能我没看懂问题。您有一个数组，并且只想在其中拖放元素（实际上只是更改元素的顺序）还是其他？我仍然不明白你为什么将可拖动的项目嵌套在一起。