el-transfer右侧数据拖拽排序

el-transfer组件是Element UI库中的一个功能，它允许用户在两个数据源之间进行拖放操作，常用于列表之间的数据交换或者展示类似拖拽排序的功能。右侧数据拖拽排序主要是指用户可以从右侧的数据区域选择一项元素并将其拖放到左侧的目标区域，通过这种方式对右侧的数据项进行实时排序。

在`el-transfer`中，要实现右侧数据的拖拽排序，一般需要配合Vue.js的事件监听（如`dragstart`, `dragover`, `drop`等）以及`v-model`双向绑定。首先，在数据源上维护一个数组表示当前状态；然后，在拖放开始时保存源位置信息，拖动过程中更新目标位置，并在释放鼠标时处理最终的排序更新。

以下是基本步骤：

1. 初始化`el-transfer`组件，设置`data-source`和`target-list`属性。
2. 添加`on-change`事件处理器，当数据交换发生时更新数据源。
3. 为`draggable`元素添加`dragstart`和`dragover`事件，记录源位置和检测是否允许放置。
4. 当`drop`事件触发时，根据目标位置调整数据源的顺序。

<template>
  <el-transfer
    :data-source="sourceData"
    :target-list="targetList"
    :move-method="handleMove"
    @change="handleChange"
    drag-over-class="draggable-over"
    :filter-option="filterOption"
  ></el-transfer>
</template>

<script>
export default {
  data() {
    return {
      sourceData,
      targetList,
      // 可能需要的数据存储和排序规则
    };
  },
  methods: {
    handleMove(source, target) {
      // 根据源和目标操作数据
    },
    handleChange(newTargetKeys) {
      // 更新源数据
    },
    filterOption(item) {
      // 数据过滤逻辑
    }
  }
};
</script>