美文网首页
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