Vue implements the requirement of dragging and dropping dynamically generated components

/* generateComponents.js file name */

import Vue from "vue";

// If you want to dynamically generate components, import this file first.
import components1 from "./components/TestCom1.vue";
import components2 from "./components/TestCom2.vue";

// Make a corresponding Map between the component name and the component
const comMap = {
  components1,
  components2,
};

// Receive the component name needed to generate the component, and the // props, and events you want to pass to the component const ReturnNewCom = function ({ props, on }) {
  const {
    comItem: { name },
  } = props;
  const newComponent = Vue.extend({
    render(createElement) {
      // Use the passed component name to decide which component to render.
      return createElement(comMap[name], {
        props,
        on,
      });
    },
  });
  return new newComponent();
};

export default ReturnNewCom;

/*components1.vue*/
<template>
  <div class="widget-wrapper">
    <header class="header">{{ comDetail.name }}--{{ comDetail.id }}</header>
    <h1>Query condition: {{ queryObj }}</h1>
    <button @click="handleDelete">Clear</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      comDetail: this.comItem,
      _queryObj: this.queryObj,
    };
  },
  props: {
    comItem: {
      type: Object,
      default() {
        return {
          id: 0,
          name: "",
        };
      },
    },
    queryObj: {
      //Can receive the selection conditions passed by the parent component, must be Object
      type: Object,
      default() {
        // Define the default query conditions.
        return {
          num: 0,
        };
      },
    },
  },
  watch:
    comItem(val) {
      this.comDetail = val;
      return val;
    },
    queryObj(val) {
      this._queryObj = val;
      return val;
    },
  },
  created() {
    console.log("data -> this.comItem", this.comItem);
  },
  methods: {
    handleDelete() {
      // Delete component method this.$el.remove();
      // Call the parent component's function. Modify the data of the leftComList array in the parent component.
      this.$emit("handleDelete", this.comDetail);
    },
  },
};
</script>
<style scoped>
.widget-wrapper {
  background: #ff7b7b;
  border-radius: 12px;
  overflow: hidden;
  width: 200px;
}
.header {
  height: 50px;
  padding: 0 15px;
}
</style>

/* App.vue */
<template>
  <div class="dragCom">
    <h1>{{ leftComList }}</h1>
    <button @click="queryObj.num++">Change query conditions</button>
    <div class="body">
      <div class="left">
        <draggable class="left" :list="leftComList" :group="'people'">
          <div
            ref="comBody"
            v-for="({ name, id }, index) in leftComList"
            :key="id"
            class="comCard"
          >
            <!-- Loop through the leftComList array and use the data to render components. 
            Add the dynamically generated array to this DOM element. -->
            {{
              handleAddCom({
                props: { comItem: { name, id }, queryObj },
                index,
              })
            }}
          </div>
        </draggable>
      </div>
      <div class="right">
        <draggable
          class="dragArea"
          :list="rightComList"
          :group="{ name: 'people', pull: 'clone', put: false }"
          :clone="handleCloneDog"
        >
          <div class="card" v-for="element in rightComList" :key="element.id">
            {{ element.name }}
          </div>
          <!-- The card data on the right, the name in the rightComList array object corresponds to generateComponents.js
          Attributes in ComMap in -->
        </draggable>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import CreateCom from "./generateComponents";
export default {
  components:
    draggable,
  },
  data() {
    return {
      rightComList: [
        {
          id: Math.random(),
          name: "components1",
        },
        {
          id: Math.random(),
          name: "components2",
        },
      ],
      leftComList: [], //Stores data that drives dynamically generated components.
      comMap: new Map(), // The main function is to record whether the component is rendered into the DOM of class="comCard",
      // If rendered, no more child elements can be added.
      queryObj: {
        // The main function is to pass query conditions to subcomponents num: 0,
      },
    };
  },
  beforeDestroy() {
    // Clear recorded data this.comMap.clear();
  },
  methods: {
    handleAddCom({ index, on = {}, props = { comItem: { name: "", id: 0 } } }) {
      const {
        comItem: { id },
      } = props;
      this.$nextTick(() => {
        // Get the length of the child nodes of this node const childNodesLength = this.$refs.comBody[index].childNodes.length;
        // Get the length of the DOM array comBody const comLine = this.$refs.comBody.length;
        if (!this.comMap.get(id)) {
          // If the component has not been rendered // 1. Call the CreateCom method to create the component. And pass props and events const com = CreateCom({
            props,
            on: {
              handleDelete: this.handleDeleteCom,
              ...on,
            },
          });
          // 2. Generate component com.$mount();
          if (childNodesLength === 2) {
            // If you want to add it between two components. Then modify the DOM position of the newly generated component and put it in the middle.
            // Add the final component DOM to the correct location this.$refs.comBody.splice(
              index,
              0,
              this.$refs.comBody[comLine - 1]
            );
          }
          // 3. Add the generated component to the DOM.
          this.$refs.comBody[index].appendChild(com.$el);
          // 4. Record that the component implements rendering.
          this.comMap.set(id, true);
        } else {
          // The component at this position has been rendered, no need to render again, just return;
        }
      });
    },
    handleDeleteCom({ id }) {
      // The method passed to the child component to delete data according to the component id const index = this.leftComList.findIndex((item) => item.id === id);
      if (~index) {
        // If a component with this id exists, delete it this.leftComList.splice(index, 1);
      }
    },
    handleCloneDog(item) {
      // Add data to leftComList array return {
        ...item,
        id: Math.random(),
      };
    },
  },
};
</script>

<style>
.dragCom {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.body {
  width: 100%;
  height: 800px;
  display: flex;
  justify-content: space-between;
}
.left {
  flex: 1;
  height: 800px;
  border: 1px solid pink;
}
.right {
  width: 20%;
  height: 800px;
}
.card {
  height: 50px;
  background-color: #40cec7;
  margin: 12px 0;
  font-size: 12px;
  line-height: 50px;
  cursor: pointer;
}
.comCard {
  margin: 12px;
  display: inline-block;
}
</style>