vue-component-creater-ui/src/components/nested.vue

<template>
  <draggable class="dragArea" tag="ul" :list="data" @start="onStartDrag" @choose="onClick"
    @end="onEndDrag">
    <template #item="{ element }">
      <li class="itemArea">
        <p>{{ getRawComponentKey(element) }}</p>
        <nested-draggable :data="getRawComponentContent(element).__children" />
      </li>
    </template>
  </draggable>
</template>
<script>
import draggable from "vuedraggable";
import { getRawComponentKey, getRawComponentContent } from "@/utils/common";

export default {
  props: {
    data: {
      required: true,
      type: Array
    }
  },
  data() {
    return {
    }
  },

  computed: {
  },
  methods: {
    getRawComponentKey, 
    getRawComponentContent,
    onStartDrag(event) {
      event.item.classList.add("is-dragging");
    },
    onClick(event) {
      if(this.$store.state.currentEditComp){
        this.$store.state.currentEditComp.item.classList.remove("is-dragging");
      }

      event.item.classList.add("is-dragging");

      event.vccData = getRawComponentContent(this.data[event.oldIndex]);
      this.$store.commit('storeCurrentEditComp', event);
    },
    onEndDrag(event) {
      event.item.classList.remove("is-dragging");

      this.$store.commit('onDragEnd');
    }
  },

  components: {
    draggable
  },
  name: "nested-draggable"
};
</script>
<style scoped lang="scss">
.dragArea {
  min-height: 20px;
  border: 1px dashed rgb(126, 126, 128);
  border-radius: 5px;
  padding-inline-start: 30px;
  padding-right: 2px;
  padding-bottom: 2px;
}

p {
  margin: 10px 0;
}

.itemArea {
  min-height: 20px;
  border: 1px dashed rgb(126, 126, 128);
  padding-right: 2px;
  padding-bottom: 2px;
  border-radius: 5px;
  padding-inline-start: 10px;
  margin: 10px 0 0;
}

.is-dragging {
  background-color: rgba(106, 127, 233, 0.274);
  border: 1px dashed rgb(73, 100, 241);
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
</style>