vue3使用vuedraggable实现拖拽功能

本文实例为大家分享了vue3使用vuedraggable实现拖拽功能的具体代码，供大家参考，具体内容如下

1、npm i vuedraggable -S，使用这个命令，vue3会报错，如下图

2、使用npm uXCdABcihninstall vuedraggable -S 卸载，再使用npm i -S vuedraggable@next下载最新版

3、vue使用代码如下：

<template> <div>  <h1 class="title">拖拽</h1>  <draggable   class="wrapper"   v-model="list"   @start="drag = true"   @end="drag = false"   item-key="index"  >   <template #item="{ element }">    <div class="item">     <p>{{ element }}</p>    </div>   </template>  </draggabtle { text-align: center; color: #42b983;}.wrapper { disXCdABcihplay: flex; justify-content: center; width: 100%;}.item { width: 100px; height: 100px; font-size: 50px; text-align: center; line-height: 100px; margin: 10px; background-color: #42b983; color: #ffffff;}</style>

4、效果如下图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。