这篇文章主要介绍了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实现拖拽功能”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。