使用vue awe-dnd插件实现拖动交换位置

韩王

已于 2023-03-16 14:14:11 修改

阅读量353

点赞数

分类专栏： vue2 文章标签： vue.js

于 2023-03-15 10:25:53 首次发布

本文链接：https://blog.csdn.net/wangaiwen/article/details/129546985

版权

vue2 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue项目中利用awe-dnd插件进行元素拖放排序。通过npm安装awe-dnd，定义数据列表moduleList，监听并处理dragged和dragend事件来更新排序结果。在main.js中全局注册VueDND插件，并在HTML中使用v-dragging指令实现拖放功能。

摘要由CSDN通过智能技术生成

1.npm install awe-dnd
2.定义数据列表moduleList:[{name:'',path:''},{name:'',path:''}],
3.js

this.$dragging.$on("dragged", (result) => {
            // 将排序后的结果重新赋值
            this.moduleList = result.value.list;
            console.log('dragged',result)
        });

        this.$dragging.$on('dragend', (v) => {
            console.log('dragend',v);
        })

在main.js中注册插件

import VueDND from 'awe-dnd'
Vue.use(VueDND)

4.html

 <div class="item_module" 
            v-dragging="{item: module, list:moduleList, group:'item',otherData:'whatever u want', comb: 'isComb'}"
            v-for="(module,inx) in moduleList"
            :key="inx">