vue實現(xiàn)頁面div盒子拖拽排序功能
更新時間：2021年10月21日 16:21:00 作者：bug愛好者
本文主要介紹了vue實現(xiàn)頁面div盒子拖拽排序功能，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
vue 實現(xiàn)頁面div盒子拖拽排序功能前言：目前市面上有很多實現(xiàn)拖拽排序功能的插件和方法，本節(jié)不過多累述，只講一種：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é)點
newItems.splice(oldIndex, 1)
// 在拖拽結(jié)束目標(biāo)位置增加新的DOM節(jié)點
newItems.splice(newIndex, 0, this.oldData)
// 每次拖拽結(jié)束后，將拖拽處理完成的數(shù)據(jù)，賦值原數(shù)組，使DOM視圖更新，頁面顯示拖拽動畫
this.customApps = newItems
// 每次拖拽結(jié)束后調(diào)用接口時時保存數(shù)據(jù)
Api(this.dragStartId, this.dragEndId).then((res) => {})
}
},
拖拽完成動畫樣式：
<style lang="scss" scoped>
.sort-move {
transition: transform 1s;
}
</style>
到此這篇關(guān)于vue實現(xiàn)頁面div盒子拖拽排序功能的文章就介紹到這了,更多相關(guān)vue div盒子拖拽排序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中的主動觸發(fā)點擊事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue和SpringBoot之間傳遞時間的方法實現(xiàn)
本文主要介紹了Vue和SpringBoot之間傳遞時間的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了vue實現(xiàn)瀏覽器全屏展示功能,項目中使用的是sreenfull插件，執(zhí)行命令安裝，具體實現(xiàn)代碼跟隨小編一起看看吧2019-11-11
Vue?echarts實例項目地區(qū)銷量趨勢堆疊折線圖實現(xiàn)詳解
Echarts，它是一個與框架無關(guān)的 JS 圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計IONIC也能用，因為我的習(xí)慣，每次新嘗試做一個功能的時候，總要新創(chuàng)建個小項目，做做Demo2022-09-09
本文主要介紹了Element-plus側(cè)邊欄踩坑的問題解決,主要解決了el-menu直接嵌套el-menu-item菜單,折疊時不會出現(xiàn)文字顯示和小箭頭無法隱藏的問題,具有一定的參考價值,感興趣的可以了解一下2023-08-08
這篇文章主要介紹了vite+vue3中如何使用router問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Effect幾乎是Vue3.0中最重要的一個功能了,計算屬性監(jiān)聽函數(shù)都是基于effect實現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于vue3中effect函數(shù)到底是什么的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
今天小編就為大家分享一篇vue視頻播放暫停代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue Element前端應(yīng)用開發(fā)之根據(jù)ABP后端接口實現(xiàn)前端展示
本篇著重介紹基于ABP后端接口信息，實現(xiàn)對前端界面的開發(fā)工作。2021-05-05
這篇文章主要介紹了vue屬性props默認(rèn)類型的寫法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04