vuedraggable+element ui實現頁面控件拖拽排序效果

2019-11-19 12:26:07

字體：大中小

來源：轉載

供稿：網友

項目要實現一些控件的拖拽排序。從而找到了這款vuedraggable控件，供大家參考，具體內容如下

如上圖要實現這些控件的拖拽排序
這是拖拽后

由于公司網絡的原因，項目沒有使用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="請輸入設置屬性" @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>

標簽draggable放在你要拖拽的組件的最外層。

相關的處理代碼

getdata(evt) {  console.log(evt.draggedContext.filterKey)  //這里evt.draggedContext后續的內容根據具體的定義變量而定},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;}

這里是因為我們需要將每個的順序記錄下來所以有業務代碼。
每次移動后，可以通過v-model獲取所有的控件，他們的順序是當前排好的順序，再進行index順序記錄。

evt為object，他的內容較多。