vue3拖拽

2022-12-30  本文已影响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,
}
},
...

上一篇下一篇

猜你喜欢

热点阅读