vuedraggable+element ui實(shí)現(xiàn)頁面控件拖拽排序效果
項(xiàng)目要實(shí)現(xiàn)一些控件的拖拽排序。從而找到了這款vuedraggable控件，供大家參考，具體內(nèi)容如下
如上圖要實(shí)現(xiàn)這些控件的拖拽排序
這是拖拽后
由于公司網(wǎng)絡(luò)的原因，項(xiàng)目沒有使用npm，都是使用的引入的js
<script type="text/javascript" src="lib/sortable/Sortable.min.js"></script> <script type="text/javascript" src="lib/vuedraggable/vuedraggable.min.js"></script>
布局代碼
<el-form :inline="true">
<draggable v-model="filters" dragable="true" :move="getdata" @update="datadragEnd">
<transition-group>
<el-col :span="8" v-for="filter in filters" :key="filter.filterKey" style="margin-top: 5px">
<el-form-item :label="filter.name" >
<el-input v-model="filter.displayName" placeholder="請(qǐng)輸入設(shè)置屬性" @focus="openFilterDialog(filter)"></el-input>
</el-form-item>
</el-col>
</transition-group>
</draggable>
<fitlerdialog v-bind:visable=dialogObjectVisible v-bind:avtivefilter=avtivefilter v-on:on-filter-data-change="onFilterDataChange" v-on:filterdialogcancle="handleDialogObjectcancle" v-on:filterdialogclose="handleDialogObjectClose"></fitlerdialog>
</el-form>
標(biāo)簽draggable放在你要拖拽的組件的最外層。
相關(guān)的處理代碼
getdata(evt) {
console.log(evt.draggedContext.filterKey)
//這里evt.draggedContext后續(xù)的內(nèi)容根據(jù)具體的定義變量而定
},
datadragEnd(evt) {
console.log('拖動(dòng)前的索引 :' + evt.oldIndex)
console.log('拖動(dòng)后的索引 :' + evt.newIndex);
let filters = this.filters;
for(let a=0;a<filters.length;a++){
filters[a].index = a;
}
vm.report.filter = filters;
}
這里是因?yàn)槲覀冃枰獙⒚總€(gè)的順序記錄下來所以有業(yè)務(wù)代碼。
每次移動(dòng)后，可以通過v-model獲取所有的控件，他們的順序是當(dāng)前排好的順序，再進(jìn)行index順序記錄。
evt為object，他的內(nèi)容較多。
draggedContext: 被拖拽元素的上下文
index:拖拽元素的指針
element: 拖拽數(shù)據(jù)本身
futureIndex: 拖動(dòng)后的index
element如圖：
這是filters定義的數(shù)據(jù)本身也就是v-model內(nèi)容。
relatedContext: 拖入?yún)^(qū)域的上下文
index: 目標(biāo)元素的index
element:目標(biāo)數(shù)據(jù)本身
list: 拖入的列表
component:目標(biāo)組件
dragged:被拖拽元素的指向
大概就這些，功能較簡單，但滿足了要求就行。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中js實(shí)現(xiàn)點(diǎn)擊復(fù)制文本到剪貼板的3種方案
今天遇到一個(gè)復(fù)制粘貼的需求,研究之后發(fā)現(xiàn)太簡單了,這篇文章主要給大家介紹了關(guān)于vue中js實(shí)現(xiàn)點(diǎn)擊復(fù)制文本到剪貼板的3種方案,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
Vue+ElementUI踩坑之動(dòng)態(tài)顯示/隱藏表格的列el-table-column問題
這篇文章主要介紹了Vue+ElementUI踩坑之動(dòng)態(tài)顯示/隱藏表格的列el-table-column問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue-router3.0版本中 router.push 不能刷新頁面的問題
這篇文章主要介紹了vue-router3.0版本中 router.push 不能刷新頁面的問題,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
Vue3中多個(gè)彈窗同時(shí)出現(xiàn)的解決思路
這篇文章主要介紹了Vue3中多個(gè)彈窗同時(shí)出現(xiàn)的解決思路,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue踩坑記錄之echarts動(dòng)態(tài)數(shù)據(jù)刷新問題
這篇文章主要介紹了vue踩坑記錄之echarts動(dòng)態(tài)數(shù)據(jù)刷新問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
解決打包后出現(xiàn)錯(cuò)誤y.a.addRoute is not a function的
這篇文章主要介紹了解決打包后出現(xiàn)y.a.addRoute is not a function的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vuex是一個(gè)專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理庫。它采用了一個(gè)集中式的架構(gòu)，將應(yīng)用程序的所有組件的狀態(tài)存儲(chǔ)在一個(gè)單獨(dú)的地方。這使得狀態(tài)的管理和維護(hù)變得更加容易2023-03-03
這篇文章主要介紹了vue3?關(guān)于reactive的重置問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue無法訪問.env.development定義的變量值問題及解決
這篇文章主要介紹了Vue無法訪問.env.development定義的變量值問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue中vue-router的使用說明(包括在ssr中的使用)
這篇文章主要介紹了vue中vue-router的使用說明(包括在ssr中的使用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05