💌 作者简介
📖 个人介绍:小伙伴们,大家好!我是水香木鱼,【前端领域创作者
】😜📜 CSDN主页:水香木鱼📑 个人博客:陈春波🎨 系列专栏:后台管理系统🌹 一键四连:关注💋+点赞👍+收藏⭐+留言📝📢 人生箴言:即使没有万全准备,也要勇敢迈出第一步。一🎠
vue拖拽
、拖拽 它来啦!它来啦! —机智如我一👩🚀 特别简单 ,安装、注册、引用 即可完成拖拽需求
控制台 一🤴打印拖拽信息一👇👇👇
1、npm安装
npm install awe-dnd --save
2、main.js注册
import VueDND from 'awe-dnd'Vue.use(VueDND)
3、源码
drag.vue
<!--拖拽--><template><div class="drag"><!-- 循环drags --><div v-for="drag in drags" v-dragging="{item: drag,list: drags,}" :key="drag.text"><!-- 文字部分 --><p>{{ drag.text }}</p></div></div></template><script>export default {data() {return {// 本地数据drags: [{text: "水天清话,院静人销夏。蜡炬风摇帘不下,竹影半墙如画。",},{text: "醉来扶上桃笙,熟罗扇子凉轻。一霎荷塘过雨,明朝便是秋声。",},{text: "雪霏霏,风凛凛,玉郎何处狂饮?醉时想得纵风流,罗帐香帷鸳寝。",},{text: "春朝秋夜思君甚,愁见绣屏孤枕。少年何事负初心?泪滴缕金双衽。",},{text: "手种堂前桃李,无限绿阴青子。帘外百舌儿,惊起五更春睡。居士,居士。莫忘小桥流水。",},{text: "大道如青天,我独不得出。",},{text: "羞逐长安社中儿,赤鸡白雉赌梨栗。",},{text: "弹剑作歌奏苦声,曳裾王门不称情。",},{text: "淮阴市井笑韩信,汉朝公卿忌贾生。",},],};},mounted() {this.$dragging.$on("dragged", ({value }) => {console.log(value.item);console.log(value.list);});this.$dragging.$on("dragend", () => {});},};</script>
📖 博主致谢
感谢大家阅读到结尾,本次的文章就分享到这里,总结了【vue拖拽组件,提高开发效率】
,希望可以帮到大家,谢谢。
如果您觉得这篇文章有帮助到您的的话不妨【关注+点赞+收藏+评论+转发
】支持一下哟~~😛您的支持就是我更新的最大动力。👇👇👇👇👇👇
🛩往期精彩:
vue实现图片预览功能,提高你的开发效率
前端获取当前系统时间/日期(vue写法)
vue后台管理做适配的最佳方案,你知道吗?
前端实现el-pagination分页的两种业务场景,你知道吗?
一文图解前端WebSocket 实时通信