这篇文章主要介绍了vue3怎么使用vuedraggable实现拖拽功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue3怎么使用vuedraggable实现拖拽功能文章都会有所收获，下面我们一起来看看吧。
1、npm i vuedraggable -S，使用这个命令，vue3会报错，如下图
2、使用npm uninstall vuedraggable -S 卸载，再使用npm i -S vuedraggable@next下载最新版
3、vue使用代码如下：
计算
安全
数据库
网络和加速
企业服务
<template>
<div>
<h2 class="title">拖拽</h2>
<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>
</draggable>
</div>
</template>
<script>
import { reactive, toRefs, onMounted } from 'vue'
import draggable from 'vuedraggable'
export default {
name: 'dragAndDrop',
components: { draggable },
setup () {
const state = reactive({
drag: false,
list: [1, 2, 3, 4, 5, 6]
})
onMounted(() => {})
return {
...toRefs(state)
}
}
}
</script>
<style scoped>
.title {
text-align: center;
color: #42b983;
}
.wrapper {
display: 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、效果如下图
关于“vue3怎么使用vuedraggable实现拖拽功能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue3怎么使用vuedraggable实现拖拽功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
