美文网首页
vue3拖拽

vue3拖拽

作者: 寻找无名的特质 | 来源:发表于2022-12-30 06:23 被阅读0次

SortableJS/vue.draggable.next: Vue 3 compatible drag-and-drop component based on Sortable.js (github.com)
可以实现vue3下拖拽效果。使用Sortable.js功能。在此基础上可以编写可视化的表单编辑器,生成json文件和布局文件。使用:
npm i -S vuedraggable@next

模板:
<draggable
v-model="myArray"
group="people"
@start="drag=true"
@end="drag=false"
item-key="id">
<template #item="{element}">
<div>{{element.name}}</div>
</template>
</draggable>

代码:
import draggable from 'vuedraggable'
...
export default {
components: {
draggable,
},
data() {
return {
drag: false,
}
},
...

相关文章

网友评论

      本文标题:vue3拖拽

      本文链接:https://www.haomeiwen.com/subject/msvyqdtx.html