基于vue框架做div盒子拖拽排序功能的代码是什么
Admin 2022-06-29 群英技术资讯 528 次浏览
vue 实现页面div盒子拖拽排序功能前言:目前市面上有很多实现拖拽排序功能的插件和方法,本节不过多累述,只讲一种:css3的transition-group方法
效果图:
1. DOM中使用:
<transition-group class="container" name="sort"> <div class="app-item" v-for="app in customApps" :key="app.id" :draggable="true" @dragstart="dragstart(app)" @dragenter="dragenter(app,$event)" @dragend="getDragend(customApps, 'customer', $event)"> <div> <img class="icon_a" v-if="app.logo" :src="app.logo" > <div class="ellipsis" >{{app.name}}</div> </div> </div> </transition-group>
2. data中定义数据
import { APi } from '@/api/enterpriseAPi' <script> export default { data() { return { oldData: [], newData: [], customApps: [], dragStartId: '', dragEndId: '' } } } </script>
3. methods方法中使用
dragstart(value) { this.oldData = value this.dragStartId = value.id }, dragenter(value) { this.newData = value this.dragEndId = value.id }, getDragend(listData, type) { if (this.oldData !== this.newData) { let oldIndex = listData.indexOf(this.oldData) let newIndex = listData.indexOf(this.newData) let newItems = [...listData] // 删除之前DOM节点 newItems.splice(oldIndex, 1) // 在拖拽结束目标位置增加新的DOM节点 newItems.splice(newIndex, 0, this.oldData) // 每次拖拽结束后,将拖拽处理完成的数据,赋值原数组,使DOM视图更新,页面显示拖拽动画 this.customApps = newItems // 每次拖拽结束后调用接口时时保存数据 Api(this.dragStartId, this.dragEndId).then((res) => {}) } },
拖拽完成动画样式:
<style lang="scss" scoped> .sort-move { transition: transform 1s; } </style>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
jquery判断当前元素是第几个的方法:1、创建一个HTML示例文件;2、通过jQuery代码“$("ul li").click(function () {var index = $("ul li").index...})”进行判断即可。
什么是Puppeteer库?能做什么?怎么使用?下面本篇文章就来给大家介绍一下Puppeteer库,了解一下Node.js中使用Puppeteer库的方法,希望对大家有所帮助!
这篇文章主要为大家详细介绍了小程序自定义tabBar组件封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文主要介绍了JS原生双栏穿梭选择框的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
比如jQuery的插件扩展原理其实就是在类的原型上扩展方法。其实有一些方法可能很实用,但是它没有提供,这时候就是需要我们自己去做一下扩展了。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008