vue實(shí)現(xiàn)頁(yè)面div盒子拖拽排序功能
vue 實(shí)現(xiàn)頁(yè)面div盒子拖拽排序功能前言:目前市面上有很多實(shí)現(xiàn)拖拽排序功能的插件和方法,本節(jié)不過(guò)多累述,只講一種: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中定義數(shù)據(jù)
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節(jié)點(diǎn) newItems.splice(oldIndex, 1) // 在拖拽結(jié)束目標(biāo)位置增加新的DOM節(jié)點(diǎn) newItems.splice(newIndex, 0, this.oldData) // 每次拖拽結(jié)束后,將拖拽處理完成的數(shù)據(jù),賦值原數(shù)組,使DOM視圖更新,頁(yè)面顯示拖拽動(dòng)畫(huà) this.customApps = newItems // 每次拖拽結(jié)束后調(diào)用接口時(shí)時(shí)保存數(shù)據(jù) Api(this.dragStartId, this.dragEndId).then((res) => {}) } },
拖拽完成動(dòng)畫(huà)樣式:
<style lang="scss" scoped> .sort-move { transition: transform 1s; } </style>
到此這篇關(guān)于vue實(shí)現(xiàn)頁(yè)面div盒子拖拽排序功能的文章就介紹到這了,更多相關(guān)vue div盒子拖拽排序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue和SpringBoot之間傳遞時(shí)間的方法實(shí)現(xiàn)
本文主要介紹了Vue和SpringBoot之間傳遞時(shí)間的方法實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07Vue?echarts實(shí)例項(xiàng)目地區(qū)銷量趨勢(shì)堆疊折線圖實(shí)現(xiàn)詳解
Echarts,它是一個(gè)與框架無(wú)關(guān)的 JS 圖表庫(kù),但是它基于Js,這樣很多框架都能使用它,例如Vue,估計(jì)IONIC也能用,因?yàn)槲业牧?xí)慣,每次新嘗試做一個(gè)功能的時(shí)候,總要新創(chuàng)建個(gè)小項(xiàng)目,做做Demo2022-09-09Element-plus側(cè)邊欄踩坑的問(wèn)題解決
本文主要介紹了Element-plus側(cè)邊欄踩坑的問(wèn)題解決,主要解決了el-menu直接嵌套el-menu-item菜單,折疊時(shí)不會(huì)出現(xiàn)文字顯示和小箭頭無(wú)法隱藏的問(wèn)題,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08Vue Element前端應(yīng)用開(kāi)發(fā)之根據(jù)ABP后端接口實(shí)現(xiàn)前端展示
本篇著重介紹基于ABP后端接口信息,實(shí)現(xiàn)對(duì)前端界面的開(kāi)發(fā)工作。2021-05-05