！！首先安装  vuedraggable 

 npm i -S vuedraggable@next

一定要带上@next，不然就会报错 很恶心！使用建议看官网。

官网：vue.draggable中文文档 - itxst.comVue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。https://www.itxst.com/vue-draggable/tutorial.html

 example：

<script setup lang="ts">
import draggable from "vuedraggable";
import { ref } from "vue";type firdType = { grid: string; num: number };
const gridLists = ref<Array<firdType>>([{ grid: "cn", num: 1 },{ grid: "cn", num: 2 },{ grid: "cn", num: 3 },{ grid: "cn", num: 4 },{ grid: "cn", num: 5 },{ grid: "cn", num: 6 },{ grid: "cn", num: 7 },{ grid: "cn", num: 8 },{ grid: "cn", num: 9 },
]);
type listsType = {people:string,id:number,name:string
}
const  lists = ref<Array<listsType>>([{ people: "cn", id: 1, name: "www.itxst.com" },{ people: "cn", id: 2, name: "www.baidu.com" },{ people: "cn", id: 3, name: "www.taobao.com" },{ people: "cn", id: 4, name: "www.google.com" }
]);
const drag = ref(false);
const getEend = (e) => {console.log(e);
};
</script>
<template><div class="drag-container"><el-row :gutter="20"><el-col :xs="25" :sm="8" :md="8" :lg="8"><el-card><template #header><div class="card-header"><span>grid列表拖拽</span></div></template><draggablev-model="gridLists"item-key="id"animation="300"chosenClass="chosen"forceFallback="true"class="grid-container"@change="getEend"><template #item="{ element }"><div :class="'item' + ' ' + 'item-' + element.num">{{ element.num }}</div></template></draggable></el-card></el-col>      <el-col :xs="25" :sm="8" :md="8" :lg="8"><el-card><template #header><div class="card-header"><span>grid列表拖拽</span></div></template><!-- 单列拖拽 --><draggablev-model="lists"item-key="name"@change="getEend"chosen-class="chosen"force-fallback="true"animation="300"><template #item="{ element, index }"><div class="item-single">{{ element.name }} {{ index }}</div></template></draggable></el-card></el-col></el-row></div>
</template><style scoped lang="scss">
/* grid列表拖拽 */
.grid-container {display: grid;grid-template-columns: 33.3% 33.3% 33.3%;grid-template-rows: 33.3% 33.3% 33.3%;
}.item {font-size: 2em;text-align: center;line-height: 100px;border: 1px solid #e5e4e9;cursor: move;
}.item-1 {background-color: #ef342a;
}.item-2 {background-color: #f68f26;
}.item-3 {background-color: #4ba946;
}.item-4 {background-color: #0376c2;
}.item-5 {background-color: #c077af;
}.item-6 {background-color: #f8d29d;
}.item-7 {background-color: #b5a87f;
}.item-8 {background-color: #d0e4a9;
}.item-9 {background-color: #4dc7ec;
}
.chosen {border: solid 2px #137fde !important;
}.item-single {font-size: 1.5em;height: 77px;text-align: center;line-height: 85px;border: 1px solid #e5e4e9;cursor: move;
}</style>