vue3怎么使用vuedraggable实现拖拽功能

这篇文章主要介绍了vue3怎么使用vuedraggable实现拖拽功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue3怎么使用vuedraggable实现拖拽功能文章都会有所收获，下面我们一起来看看吧。

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

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

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>

效果如下图

关于“vue3怎么使用vuedraggable实现拖拽功能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue3怎么使用vuedraggable实现拖拽功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。