使用VUE框架中的elementUI,如何实现拖动排序的功能?

要实现拖动排序的功能，可以使用elementUI中的拖拽排序组件el-draggable。

1. 在组件中引入el-draggable组件

<template>
  <el-draggable v-model="list" :element="'ul'">
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
  </el-draggable>
</template>

2. 在data中定义需要排序的列表数据

data() {
  return {
    list: ['第一项', '第二项', '第三项', '第四项', '第五项']
  }
}

3. 在mounted中设置拖拽排序的属性

mounted() {
  this.$nextTick(() => {
    this.$refs.draggable.sortable.option('handle', '.el-icon-drag')
    this.$refs.draggable.sortable.option('animation', 150)
  })
}

其中，handle属性表示拖动时的手柄，可自定义；animation属性表示拖动时的动画时间，单位为毫秒。

完整代码如下：

<template>
  <el-draggable v-model="list" :element="'ul'" ref="draggable">
    <li v-for="(item, index) in list" :key="index">
      <i class="el-icon-drag"></i>{{ item }}
    </li>
  </el-draggable>
</template>

<script>
export default {
  data() {
    return {
      list: ['第一项', '第二项', '第三项', '第四项', '第五项']
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.draggable.sortable.option('handle', '.el-icon-drag')
      this.$refs.draggable.sortable.option('animation', 150)
    })
  }
}
</script>

<style>
.el-icon-drag {
  margin-right: 10px;
  cursor: move;
}
</style>

此时，就可以实现拖动排序的功能了。