How to make element parent if the element doesnt have a child in vue draggable

Question

I am trying to use vue-draggable in my project: https://github.com/SortableJS/Vue.Draggable

Here is my ElementsList component:

<div>
            <draggable v-model="newElement" :move="handleMove" v-bind="dragOptions">
                <transition-group>
                    <NestedClimatePlanElement
                        v-for="(element, index) in newElement"
                        :key="`${element.id}_${index}`"
                        :element="element"
                        @open-element-sidebar="openElementSidebar"
                        :is-expanded="isExpanded"
                        :draggable-event="draggableEvent"
                    />
                </transition-group>
            </draggable>
        </div>

and here is my NestedElements component:

<template> 
  <div>
    <Element
      :element="element"
      @toggle-accordion="toggleAccordion"
      @open-element-sidebar="openElementSidebar"
      :has-child="hasChildElement"
      :is-expanded="isAllOpen"
      :users="users"
    />
    <draggable
      v-if="(isOpen || isAllOpen)"
      v-model="element.childElements.data"
      v-bind="dragOptions"
      class="child-elements-container"
      :move="handleMove"
    >
      <transition-group>
        <NestedElement
          v-for="(childElement, index) in element.childElements.data"
          v-if="element.childElements && element.childElements.data && element.childElements.data.length"
          :key="`${childElement.id}_${index}`"
          :element="childElement"
          @open-element-sidebar="openElementSidebar"
          :is-open="isOpen"
          :is-expanded="isAllOpen"
        />
      </transition-group>
    </draggable>
  </div>
</template>

my problem is when the element doesnt have a child element, I cannot drag any element into that element and make this element parent.

I tried to summarize my components as much as possible, please let me know if you need anything else. For both draggable elements, dragOptions are:

dragOptions: {
        group: "plan-elements",
        animation: 150,
        ghostClass: "ghost",
        forceFallback: true,
        fallbackOnBody: true,
        chosenClass: "dragging",
        pull: "clone",
      },

Thanks for the help.

Answer 1

Assuming you want to make components act as potential parent elements, and you want to make it possible to drop elements onto them, follow these steps:

Add an event listener for the @dragover event to the component to detect when it's possible to make it a parent element. You can conditionally set a class when it can accept child elements. Also, add an event listener for the @drop event to handle the drop operation.

 <NestedClimatePlanElement
  v-for="(element, index) in newElement"
  :key="`${element.id}_${index}`"
  :element="element"
  @open-element-sidebar="openElementSidebar"
  :is-expanded="isExpanded"
  :draggable-event="draggableEvent"
  @dragover="handleDragOver"
  @drop="handleDrop"
  :class="{ 'can-accept-child': canAcceptChild }"
/>


methods: {
  handleDragOver(event) {
    event.preventDefault();
    this.canAcceptChild = true;
  },
  handleDrop(event) {
    event.preventDefault();
    this.canAcceptChild = false;

    // Handle the drop operation here, e.g., add the dropped element to this.newElement
    const droppedElement = // Retrieve the dropped element
    this.newElement.push(droppedElement);
  }
}