在ElementPlus的el-row组件上使用函数式或指令式定义多个列表拖拽会有记录已全部移出，但显示扔有一个，且还能继续拖动到其他列表中

[MonGDCH]

使用最新版本

[MonGDCH]

• 参考代码

<template>
    <el-row class="w-full" style="min-height: 120px;" ref="row-draggable">
        <el-col class="relative" :span="24" v-for="(e) in list" :key="e.key">
            <div>{{ e.key }}</div>
        </el-col>
    </el-row>
</template>
<script>
import { ref, computed, watch, useTemplateRef, onMounted } from 'vue';
import { VueDraggable, vDraggable, useDraggable } from 'vue-draggable-plus'
export default {
    name: 'Widget-item',
    components: { ItemView, VueDraggable },
    setup(props, { emit }) {
        const list = ref([
            {
                key: 'item 1',
                componentConfig: {}
            },
            {
                key: 'item 3',
                componentConfig: {}
            },
            {
                key: 'item 2',
                componentConfig: {}
            },
            {
                key: 'item 4',
                componentConfig: {}
            },
            {
                key: 'item 6',
                componentConfig: {}
            },
            {
                key: 'item 7',
                componentConfig: {}
            }
        ])
        const rowRef = useTemplateRef('row-draggable')
        useDraggable(rowRef, list, {
            group: 'widget', ghostClass: 'clone', animation: '200'
        })


        return { list }
    }
}

[MonGDCH]

使用div则正常

[Alfred-Skyblue]

是否可以提供在线的复现案例？这样可以帮助我们更好的排查问题

[MonGDCH]

这个是复现的代码，试试看的

<template>
    <div style="width: 90%; margin: 24px auto">
        <el-row style="width: 100%; min-height: 120px; border: 1px solid #ccc; margin-bottom: 32px" ref="row-draggable">
            <el-col class="h-6" :span="24" v-for="item in list" :key="item.key">
                {{ item.key }}
            </el-col>
        </el-row>
        <el-row style="width: 100%; min-height: 120px; border: 1px solid #ccc;" ref="row-draggable2">
            <el-col class="h-6" :span="24" v-for="item in list2" :key="item.key">
                {{ item.key }}
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { ref, useTemplateRef } from 'vue';
import { useDraggable } from 'vue-draggable-plus'
export default {
    setup() {
        const list = ref([
            { key: 'item 1' },
            { key: 'item 3' },
            { key: 'item 2' },
            { key: 'item 4' },
            { key: 'item 6' },
            { key: 'item 7' }
        ])
        const list2 = ref([])
        const rowRef = useTemplateRef('row-draggable')
        const rowRef2 = useTemplateRef('row-draggable2')
        useDraggable(rowRef, list, {
            group: 'widget', ghostClass: 'clone', animation: '200'
        })

        useDraggable(rowRef2, list2, {
            group: 'widget', ghostClass: 'clone', animation: '200'
        })
        return { list, list2 }
    }
}
</script>
<style scoped></style>