vuedraggable+element ui實(shí)現(xiàn)頁面控件拖拽排序效果

更新時間：2021年09月08日 14:43:43 作者：一粒沙cym

這篇文章主要為大家詳細(xì)介紹了vuedraggable+element ui實(shí)現(xiàn)頁面控件拖拽排序效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

項(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="請輸入設(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('拖動前的索引 :' + evt.oldIndex)
 console.log('拖動后的索引 :' + evt.newIndex);

 let filters = this.filters;
 for(let a=0;a<filters.length;a++){
  filters[a].index = a;
 }
 vm.report.filter = filters;

}

這里是因?yàn)槲覀冃枰獙⒚總€的順序記錄下來所以有業(yè)務(wù)代碼。
每次移動后，可以通過v-model獲取所有的控件，他們的順序是當(dāng)前排好的順序，再進(jìn)行index順序記錄。

evt為object，他的內(nèi)容較多。