vue3+ts利用draggable组件实现拖拽

界面展示

实现步骤

• 安装组件（vue3引入的包为vuedraggable@next ，vue2为vuedraggable）

npm i -S vuedraggable@next

• 引入并使用组件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

<template>   <draggable     class="drag_box"     :list="extraImgs"     :force-fallback="true"     animation="300"     item-key="id"     @start="onStart"     @end="onEnd">     <template #item="{ element }">       <div class="drag_img_item">         <img :src="element.url" alt="" />       </div>     </template>   </draggable> </template>   <script lang="ts" setup> import { ref } from "vue"; import Draggable from "vuedraggable";   interface iImg {   id: string;   url: string; } const extraImgs = ref<iImg[]>([   { id: "pic1", url: "https://img2.baidu.com/it/u=1928550932,799340695&fm=253&fmt=auto?w=200&h=200" },   { id: "pic2", url: "https://img0.baidu.com/it/u=3017355839,3860468475&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200" },   { id: "pic3", url: "https://img1.baidu.com/it/u=1865493700,1185937958&fm=253&fmt=auto&app=138&f=JPEG?w=190&h=190" }, ]); const onStart = function () {}; const onEnd = function () {}; </script> <style scoped> .drag_box {   display: flex; } .drag_img_item {   margin-right: 10px; } img {   width: 85px;   height: 85px;   border-radius: 3px; } </style>