Is there a way to expand the Vue.Draggable drop zone to outside the draggable custom tag?

Question

I have a scenario where i have multiple containers with a header, then the list that will be used on vue.draggable and a footer.

I've managed to put the list part working with drag and drop between the multiple containers, but only if i drop them in the list area of the containers.

My ideal scenario would be for the drop to be possible in the entire container, so that i can drop a list item also in the header/footer (perhaps defaulting it to add it to position 0 of the list).

I've tried creating additional vue.draggable custom tags not only on the list items but also on the parent div, but it doesn't help, since now we can drag the whole parent div.

Here's the vue template for the base of the several containers that i have:

<template>
  <div class="container">
    <div class="header">
      <p>{{header}}</p>
    </div>
    <div class="body">
      <draggable class="drag-area" :list="items" group="default">
        <div v-for="item in items" :key="item.id">
          <drag-item :item="item"></drag-item>
        </div>
      </draggable>
    </div>
    <div class="footer">
      <p>{{footer}}</p>
    </div>
  </div>
</template>

Is there any way to be able to drag the drag-item to the whole container? Namely dropping it in the header/footer?

I'm using vue 2.6.10 and vuedraggable 2.23.0

Equites

Answer 1

Setting :empty-insert-threshhold="100" will increase the drop radius to make it easier to drop items into a list.

    <draggable
      tag="ol"
      :empty-insert-threshhold="500"
      v-model="list"
     ...
    >...</draggable>

Rossen