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中使用pdfjs預(yù)覽pdf文件，這樣的優(yōu)勢是無須讓用戶安裝專門的軟件即可實現(xiàn)預(yù)覽，下面就看看如何實現(xiàn)這個需求2021-06-06
頁面水印大家或許都不陌生，本文主要介紹了Vue之全局水印的實現(xiàn)示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
基于vue項目設(shè)置resolves.alias: ''@''路徑并適配webstorm
這篇文章主要介紹了基于vue項目設(shè)置resolves.alias: '@'路徑并適配webstorm,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-12-12
這篇文章主要為大家介紹了vue3中的透傳attributes教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
vue 里面的 $forceUpdate() 強制實例重新渲染操作
這篇文章主要介紹了vue 里面的 $forceUpdate() 強制實例重新渲染操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
el-elementUI使用el-date-picker選擇年月
本文主要介紹了el-elementUI使用el-date-picker選擇年月,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-02-02
這篇文章主要介紹了vue?全選組件封裝,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-02-02
前端Vue3項目打包成Docker鏡像運行的詳細(xì)步驟
將Vue3項目打包、編寫Dockerfile、構(gòu)建Docker鏡像和運行容器是部署Vue3項目到Docker的主要步驟,這篇文章主要介紹了前端Vue3項目打包成Docker鏡像運行的詳細(xì)步驟,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了如何使用vue實現(xiàn)帶縮略圖的輪播圖效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的可以參考下2024-02-02
這篇文章主要介紹了Vue+Element?switch組件的使用,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06