这篇文章主要为大家详细介绍了vue3使用vuedraggable实现拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue3使用vuedraggable实现拖拽功能的具体代码，供大家参考，具体内容如下
1、npm i vuedraggable -S，使用这个命令，vue3会报错，如下图
2、使用npm uninstall 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>
</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、效果如下图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- vue使用vuedraggable实现嵌套多层拖拽排序功能
- vue拖拽组件vuedraggable使用说明详解
- 使用vuedraggable实现从左向右拖拽功能
- vue拖拽排序插件vuedraggable使用方法详解
- 详解vue项目中使用vuedraggable
