vue中用vuedraggable方法实现拖拽的内容是什么

这篇文章主要介绍“vue中用vuedraggable方法实现拖拽的内容是什么”，有一些人在vue中用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方法实现拖拽的内容是什么的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注博信，博信将为大家推送更多相关的文章。