Elements from different groups can be dragged and dropped into each other

[Codesvoyager]

<div class="itxst"> <div class="group"> <draggable :list="modules.arr1" ghost-class="ghost" handle=".move" filter=".forbid" :force-fallback="true" chosen-class="chosenClass" animation="300" @start="onStart" @end="onEnd" :group="{ name: 'people', pull: 'clone', put: false }" :fallback-class="true" :fallback-on-body="true" :touch-start-threshold="50" :fallback-tolerance="50" :move="onMove" :sort="false"> <template #item="{ element }"> <div class="item move"> <label class="move">{{ element.name }}</label> <span v-html="element.name == '消息' ? 'www.itxst.com' : '内容....'"></span> </div> </template> </draggable> </div> <div class="group"> <draggable :list="modules.arr2" ghost-class="ghost" handle=".move" filter=".forbid" :force-fallback="true" chosen-class="chosenClass" animation="300" @start="onStart" @end="onEnd" :group="{ name: 'people', pull: false, put: true }" :fallback-class="true" :fallback-on-body="true" :touch-start-threshold="50" :fallback-tolerance="50" :move="onMove"> <template #item="{ element }"> <div class="item move"> <label class="move">{{ element.name }}</label> <span>内容....</span> </div> </template> </draggable> </div> <div class="group"> <draggable :list="modules.arr3" ghost-class="ghost" handle=".move" filter=".forbid" :force-fallback="true" chosen-class="chosenClass" animation="300" @start="onStart" @end="onEnd" :group="{ name: 'user', pull: 'clone', put: false }" :fallback-class="true" :fallback-on-body="true" :touch-start-threshold="50" :fallback-tolerance="50" :move="onMove"> <template #item="{ element }"> <div class="item move"> <label class="move">{{ element.name }}</label> <span>内容....</span> </div> </template> </draggable> </div> </div> </div>
Why can "user" be dragged into "people"?

[MattS-98]

I am having the same issue. When the value assigned to group is just the name value, it works as expected, but when you try to assign an object it no longer works