这篇文章主要介绍“怎么用vue实现页面div盒子拖拽排序功能”,在日常操作中,相信很多人在怎么用vue实现页面div盒子拖拽排序功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用vue实现页面div盒子拖拽排序功能”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
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>
到此,关于“怎么用vue实现页面div盒子拖拽排序功能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。