vue + elementUI + vuedraggable 实现拖动排序

  1. 安装 npm install vuedraggable -S(可能需要安装 Sortable)
  2. 引用 import draggable from 'vuedraggable'
  3. 注册组件 components: { draggable },
  4. 通过 <draggable> 标签来使用
  5. 调用 update 方法,此方法事件对象返回新索引和旧索引,同样数据是响应式的.

template 代码 

<draggable v-model="codeList" @update="datadragEnd" :options="{animation:200}">
  <div class="drag-item" v-for="(item,i) in codeList" :key="i">
    <el-row>
      <el-col class="line" :span="6">&nbsp;{{item.field_title}}</el-col>
      <el-col class="line" :span="8">
        <el-switch
          v-model="item.is_show"
          active-color="#13ce66"
          @change="lockChange(item)"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </el-col>
      <el-col :span="8">
        <el-button type="text" size="mini" @click="showEditCode(item)">编辑</el-button>
        <el-button
          v-if="item.is_system != 1"
          type="text"
          size="mini"
          @click="deleCode(item)"
        >删除</el-button>
      </el-col>
    </el-row>
  </div>
</draggable>

js 代码 

async datadragEnd(evt) {
  evt.preventDefault();
  // console.log('拖动前的索引 :' + evt.oldIndex)
  // console.log('拖动后的索引 :' + evt.newIndex)
  // 遍历数组,将索引值赋值到对应的sort_order上面,完成排序
  let arr = this.codeList;
  let newArr = await arr.map((item, i) => {
    return {
      sort_order: i,
      field_code: item.field_code
    };
  });
  const res = await this.$axios.post(`customer/save_order`, {
    list: newArr
  });
  // console.log(res)
  const { error, message } = res.data;
  if (error == 0) {
    this.$message.success(message);
  }
},

https://github.com/SortableJS/Vue.Draggable/blob/master/documentation/migrate.md#options-props

Element props

element has been deprecated and you should use tag props instead. The motivation is to comply with widespread convention.

Migrate from:

<draggable v-for="list" element="ul">
    <!-- -->
</draggable>

To:

<draggable v-for="list" tag="ul">
  <!-- -->
</draggable>

Options props

options props has been deprecated in version v2.20.

Vue.draggable starting from that release will use transparent wrapper to pass props to the Sortable instance.

So Sortable options can directly be attached to Vue.draggable instance.

Example 1:

Migrate from:

<draggable v-for="list" :options="{handle: '.handle'}">
  <!-- -->
</draggable>

To:

<draggable v-for="list" handle=".handle">
  <!-- -->
</draggable>

Example 2:

Migrate from:

<draggable v-for="list" :options="getOptions()">
   <!-- -->
</draggable>

To:

<draggable v-for="list" v-bind="getOptions()">
   <!-- -->
</draggable>