vue实现左侧数据拖拽到右侧区域，且左侧数据保留且左侧数据不能互相拖拽改变顺序

一、案例效果

二、案例代码

• 封装左侧抽屉
  DrawerSearch.vue

<template><div><mtd-form :model="formDrawerSearch" ref="formCustom" inline><mtd-form-item><mtd-inputtype="text"v-model="formDrawerSearch.hostname"placeholder="搜索已有图表"style="width: 130px"/></mtd-form-item><mtd-form-item><mtd-selectv-model="formDrawerSearch.searchOrder"placeholder="按修改时间排序"style="width: 145px"clearablefilterable><mtd-optionv-for="item in searchOrderList":key="item.value":label="item.label":value="item.value"/></mtd-select></mtd-form-item></mtd-form></div>
</template>
<script lang="ts" setup name="DrawerSearch">
import { ref, watch } from 'vue';const $emit = defineEmits(['formDrawerSearch']);const formDrawerSearch = ref({hostname: '',searchOrder: '',
});
const searchOrderList = ref([{value: 'tag1',label: '按照修改人',},{value: 'tag2',label: '按照风险域',},{value: 'tag3',label: '按照数据集',},
]);watch(() => formDrawerSearch.value,() => {$emit('formDrawerSearch', formDrawerSearch.value);},{ deep: true },
);
</script>

DrawerContent.vue

<template><div class="drawer-content pr-5"><draggable:list="cardList":move="onMove":group="{ name: 'items', pull: 'clone', put: false }":clone="checkAndCloneItem":sort="false"item-key="id"><div v-for="(item, index) in cardList" :key="index"><mtd-card class="card-box"><div><span class="text-[13px] font-semibold">{{ item.title }}</span><mtd-buttonv-if="item.isAdd"class="float-right"ghosttype="primary"size="small"