这个案例是利用vuedraggable渲染动态组件，文章来源：https://www.toymoban.com/news/detail-654074.html
bug：拖拽失效 vue2是需要在component这个标签上v-for，vue3是不需要的文章来源地址https://www.toymoban.com/news/detail-654074.html
<template>
<div>
<div>
<vuedraggable
ref="drag"
v-model="state.listComp"
v-bind="state.dragOptions"
:forceFallback="true"
item-key="id"
handle=".draggableItem"
>
<template #item="{ element }">
<component
:key="element.name"
:is="element.name"
v-bind="element"
class="item"
>
</component>
</template>
</vuedraggable>
</div>
</div>
</template>
<script setup>
import vuedraggable from "vuedraggable";
import { reactive } from "vue";
const state = reactive({
date: "2023-08-16",
listComp: [
// 数据
],
dragOptions: {
animation: 0,
disabled: false,
group: "description",
ghostClass: "ghost",
},
});
</script>
<style lang="scss" scoped><style>
到了这里，关于vue3 + vuedraggable: ^4.1.0 实现列表拖拽的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
