用户分组拖动图片和填写信息 antd+vue2代码

在Ant Design Vue (Vue2版本) 中，你可以利用其提供的`<Transfer>`组件以及自定义事件处理来实现用户分组拖动图片并填写信息的功能。`Transfer`组件通常用于数据的拖放操作，可以轻松地创建文件、列表项等的分组管理。

以下是一个简单的示例代码：

<template>
  <div>
    <a-transfer :data-source="dataSource" :target-keys="targetKeys"
      @transfer-success="handleSuccess"
      @transfer-cancel="handleChange"
      :show-operation="false">
      <div slot="list-header">源</div>
      <div slot="list-footer">目标</div>
      <div slot="item" class="item">
        <img :src="item.avatar" alt="avatar" />
        <span>{{ item.name }}</span>
        <span slot="operations">
          <a-icon type="delete" @click="removeItem(item.key)" />
        </span>
      </div>
    </a-transfer>
    <form ref="groupForm">
      <!-- 添加新组信息表单 -->
    </form>
  </div>
</template>

<script>
import { Transfer } from 'ant-design-vue';

export default {
  components: {
    Transfer
  },
  data() {
    return {
      dataSource: [], // 源数据数组
      targetKeys: [], // 目标键数组
      groupForm: {}, // 新组信息对象
    };
  },
  methods: {
    addItem(key) {
      this.groupForm[key] = {
        avatar: '',
        name: '',
        // 其他需要填写的信息...
      };
    },
    removeItem(key) {
      // 删除源数据和对应组信息
      this.dataSource = this.dataSource.filter(item => item.key !== key);
      delete this.groupForm[key];
    },
    handleSubmit() {
      // 提交分组后的完整信息
    },
    handleSuccess({ source, target }) {
      // 数据交换成功时的操作，如添加到目标数组
      this.targetKeys.push(source[this.dataSource.length - 1].key);
      this.removeItem(source[this.dataSource.length - 1].key);
    },
    handleChange() {
      // 数据交换取消或未完成时的操作
    },
  }
};
</script>

<style scoped>
.item {
  display: flex;
  align-items: center;
}
</style>

在这个例子中，我们首先定义了数据源和目标键，然后监听`transfer-success`和`transfer-cancel`事件来处理拖动操作。`addItem`方法用于创建新的组信息，`removeItem`方法用于删除已移动的数据。当用户提交表单时，你需要实现`handleSubmit`方法来处理完整的信息。