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

<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" >
                <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>

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;

}