vuedraggable+element ui实现页面控件拖拽排序效果

<  type=\"text/ \" src=\"lib/sortable/Sortable.min.js\"></ >
<  type=\"text/ \" src=\"lib/vuedraggable/vuedraggable.min.js\"></ >

<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=dialog Visible v-bind:avtivefilter=avtivefilter  v-on:on-filter-data-change=\"onFilterDataChange\" v-on:filterdialogcancle=\"handleDialog cancle\" v-on:filterdialogclose=\"handleDialog Close\"></fitlerdialog>
</el-form>

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;

}