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